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

feat(root): layout configuration added to the tailwind plugin, components were adapted

Browse Source
This commit is contained in:
Junior Garcia 2023-07-01 20:03:52 -03:00
parent ce9abed071
commit 114c3f5a6b
348 changed files with 2199 additions and 1972 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/docs/app/docs/[[...slug]]/page.tsx
View File

@ -31,7 +31,7 @@ interface DocPageProps {
const cache = new Map();
export function getDocFromParams(params: {slug: string[]}) {
function getDocFromParams(params: {slug: string[]}) {
let meta, doc;
const {slug} = getAppSlug(params);

9
apps/docs/components/cmdk.tsx
View File

@ -9,7 +9,7 @@ import {CloseIcon} from "@nextui-org/shared-icons";
import {tv} from "tailwind-variants";
import {useRouter} from "next/navigation";
import MultiRef from "react-multi-ref";
import {cn} from "@nextui-org/theme";
import {clsx} from "@nextui-org/shared-utils";
import scrollIntoView from "scroll-into-view-if-needed";
import {isAppleDevice} from "@react-aria/utils";
import {create} from "zustand";
@ -269,11 +269,12 @@ export const Cmdk: FC<{}> = () => {
return (
<Button
isIconOnly
className={cn(
className={clsx(
"border data-[hover=true]:bg-content2 border-default-400 dark:border-default-100",
className,
)}
size="xs"
radius="full"
size="sm"
variant="bordered"
onPress={onPress}
>
@ -339,6 +340,8 @@ export const Cmdk: FC<{}> = () => {
wrapper: "md:items-start",
base: [
"mt-[20vh]",
"border-small",
"dark:border-default-100",
"supports-[backdrop-filter]:bg-background/80",
"dark:supports-[backdrop-filter]:bg-background/30",
"supports-[backdrop-filter]:backdrop-blur-md",

2
apps/docs/components/demo-code-modal.tsx
View File

@ -45,7 +45,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
setIsCodeVisible(isOpen);
},
}}
radius={isMobile ? "none" : "2xl"}
radius={isMobile ? "none" : "lg"}
size={isMobile ? "full" : "2xl"}
onClose={onClose}
>

3
apps/docs/components/demos/music-player.tsx
View File

@ -23,8 +23,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
<Card
isBlurred
className={clsx("border-none bg-background/60 dark:bg-default-100/50", className)}
radius="2xl"
shadow="2xl"
shadow="sm"
{...otherProps}
>
<CardBody>

2
apps/docs/components/docs/components/blockquote.tsx
View File

@ -5,7 +5,7 @@ const blockquoteStyles = tv({
base: "border pl-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
variants: {
color: {
default: "border-default-100 bg-default-50/20",
default: "border-default-200 dark:border-default-100 bg-default-200/20",
primary: "border-primary-100 bg-primary-50/20",
secondary: "border-secondary-100 bg-secondary-50/20",
success: "border-success-100 bg-success-50/20",

3
apps/docs/components/docs/components/code-demo/code-demo.tsx
View File

@ -34,6 +34,7 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
showTabs?: boolean;
showPreview?: boolean;
showOpenInCodeSandbox?: boolean;
isPreviewCentered?: boolean;
displayMode?: "always" | "visible";
isGradientBox?: boolean;
gradientColor?: GradientBoxProps["color"];
@ -49,6 +50,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
showPreview = true,
asIframe = false,
showSandpackPreview = false,
isPreviewCentered = false,
showOpenInCodeSandbox,
isGradientBox = false,
defaultExpanded = false,
@ -106,6 +108,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
<DynamicReactLiveDemo
code={code}
gradientColor={gradientColor}
isCentered={isPreviewCentered}
isGradientBox={isGradientBox}
noInline={noInline}
overflow={overflow}

9
apps/docs/components/docs/components/code-demo/react-live-demo.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import {LivePreview, LiveProvider, LiveError} from "react-live";
import {clsx} from "@nextui-org/shared-utils";
import * as Components from "@nextui-org/react";
import {BgGridContainer} from "@/components/bg-grid-container";
@ -8,6 +9,7 @@ import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
export interface ReactLiveDemoProps {
code: string;
noInline?: boolean;
isCentered?: boolean;
isGradientBox?: boolean;
gradientColor?: GradientBoxProps["color"];
overflow?: "auto" | "visible" | "hidden";
@ -21,11 +23,16 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
code,
isGradientBox,
gradientColor = "orange",
isCentered = false,
noInline,
}) => {
const content = (
<>
<LivePreview className="live-preview flex h-full w-full not-prose" />
<LivePreview
className={clsx("live-preview flex h-full w-full not-prose", {
"justify-center items-center": isCentered,
})}
/>
<LiveError />
</>
);

73
apps/docs/components/docs/components/component-links.tsx
View File

@ -1,4 +1,4 @@
import {Button, Link} from "@nextui-org/react";
import {Button, ButtonProps, Link} from "@nextui-org/react";
import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon} from "@/components/icons";
import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
@ -10,6 +10,27 @@ export interface ComponentLinksProps {
reactAriaHook?: string;
}
const ButtonLink = ({
children,
href,
startContent,
...props
}: ButtonProps & {
href: string;
}) => (
<Button
isExternal
as={Link}
className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
href={href}
size="sm"
startContent={startContent}
{...props}
>
{children}
</Button>
);
export const ComponentLinks = ({
component,
storybook,
@ -22,63 +43,35 @@ export const ComponentLinks = ({
return (
<div className="flex flex-wrap gap-3 mt-6">
<Button
isExternal
as={Link}
className="bg-default-100 dark:bg-default-50 text-default-700"
<ButtonLink
href={`https://storiesv2.nextui.org/?path=/story/components-${storybook || component}`}
radius="md"
size="sm"
startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
>
Storybook
</Button>
<Button
isExternal
as={Link}
className="bg-default-100 dark:bg-default-50 text-default-700"
</ButtonLink>
<ButtonLink
href={`https://www.npmjs.com/package/@nextui-org/${component}`}
radius="md"
size="sm"
startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
>
{`@nextui-org/${component}`}
</Button>
</ButtonLink>
{reactAriaHook && (
<Button
isExternal
as={Link}
className="bg-default-100 dark:bg-default-50 text-default-700"
<ButtonLink
href={`https://react-spectrum.adobe.com/react-aria/${reactAriaHook}.html`}
radius="md"
size="sm"
startContent={<AdobeIcon className="text-lg text-[#E1251B]" />}
>
React Aria
</Button>
</ButtonLink>
)}
<Button
isExternal
as={Link}
className="bg-default-100 dark:bg-default-50 text-default-700"
href={`${COMPONENT_PATH}/${component}`}
radius="md"
size="sm"
startContent={<GithubIcon />}
>
<ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
Source
</Button>
<Button
isExternal
as={Link}
className="bg-default-100 dark:bg-default-50 text-default-700"
</ButtonLink>
<ButtonLink
href={`${COMPONENT_THEME_PATH}/${styles || component}.ts`}
radius="md"
size="sm"
startContent={<GithubIcon />}
startContent={<GithubIcon size={20} />}
>
Styles source
</Button>
</ButtonLink>
</div>
);
};

7
apps/docs/components/docs/sidebar.tsx
View File

@ -14,7 +14,6 @@ import {
SpacerProps,
Spacer,
Link as NextUILink,
cn,
Chip,
dataFocusVisibleClasses,
} from "@nextui-org/react";
@ -151,12 +150,12 @@ function TreeItem<T>(props: TreeItemProps<T>) {
{rendered}
</span>
{isNew && (
<Chip className="ml-2" color="primary" size="xs" variant="flat">
<Chip className="ml-2" color="primary" size="sm" variant="flat">
New
</Chip>
)}
{item.props?.comingSoon && (
<Chip className="ml-2" color="default" size="xs" variant="flat">
<Chip className="ml-2" color="default" size="sm" variant="flat">
Coming soon
</Chip>
)}
@ -246,7 +245,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
}, [] as string[]);
return (
<div className={cn("lg:fixed lg:top-20 mt-2 z-0 lg:h-[calc(100vh-121px)]", className)}>
<div className={clsx("lg:fixed lg:top-20 mt-2 z-0 lg:h-[calc(100vh-121px)]", className)}>
<Tree defaultExpandedKeys={expandedKeys} items={routes || []}>
{(route) => (
<Item

1
apps/docs/components/docs/toc.tsx
View File

@ -73,6 +73,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
"font-normal",
"flex items-center text-sm font-normal text-default-500 dark:text-default-300",
"data-[active=true]:text-foreground",
"dark:data-[active=true]:text-foreground",
"before:content-['']",
"before:opacity-0",
"data-[active=true]:before:opacity-100",

5
apps/docs/components/marketing/custom-themes/custom-themes.tsx
View File

@ -117,7 +117,7 @@ const CustomThemesExample = ({
/>
)}
</Tabs>
<Card className={slots.wrapper()} radius="2xl">
<Card className={slots.wrapper()} radius="lg">
<CardBody className="relative flex-col md:flex-row md:items-center gap-4 md:gap-9 overflow-visible">
<div className={slots.imageWrapper()}>
<Image
@ -164,7 +164,6 @@ const CustomThemesExample = ({
<Button
className={slots.buyButton()}
color="primary"
radius="xl"
variant={selectedTheme === "nextui" ? "shadow" : "solid"}
>
Buy now
@ -172,7 +171,7 @@ const CustomThemesExample = ({
<Button
className={slots.addToBagButton()}
color="primary"
radius="xl"
radius="full"
variant="bordered"
>
Add to bag

23
apps/docs/components/marketing/hero/floating-components.tsx
View File

@ -44,7 +44,7 @@ export const FloatingComponents: React.FC<{}> = () => {
}}
endContent={<MoonFilledIcon />}
isSelected={isSelected}
size="xl"
size="lg"
startContent={<SunFilledIcon />}
onChange={onChange}
/>
@ -55,7 +55,6 @@ export const FloatingComponents: React.FC<{}> = () => {
defaultValue="NextUI"
label="Input"
labelPlacement="outside"
radius="xl"
variant="bordered"
onClear={() => {}}
/>
@ -63,7 +62,6 @@ export const FloatingComponents: React.FC<{}> = () => {
<Card
isFooterBlurred
className="absolute -top-[260px] right-[100px] h-[120px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
radius="2xl"
>
<Image
alt="Professional camera"
@ -73,7 +71,7 @@ export const FloatingComponents: React.FC<{}> = () => {
src="/images/card-example-6.webp"
width={120}
/>
<CardFooter className="before:bg-black/10 before:border before:border-white/20 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
<CardFooter className="before:bg-black/10 border-white/20 border-1 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
<p className="text-xs font-semibold text-white/80">Camera</p>
<p className="text-xs font-semibold text-white/80">$525</p>
</CardFooter>
@ -83,7 +81,10 @@ export const FloatingComponents: React.FC<{}> = () => {
<UserTwitterCard className="absolute left-[80px] -top-[80px] animate-[levitate_16s_ease_infinite] border-none" />
<Card className="absolute right-[110px] -top-[60px] animate-[levitate_18s_ease_infinite] shadow-lg z-10 max-w-fit border-none">
<Card
className="absolute right-[110px] -top-[60px] animate-[levitate_18s_ease_infinite] z-10 max-w-fit border-none"
shadow="lg"
>
<CardBody>
<NextUILogo small size={60} />
</CardBody>
@ -122,16 +123,18 @@ export const FloatingComponents: React.FC<{}> = () => {
</Tooltip>
)}
<Card className="absolute right-[10px] top-[30px] animate-[levitate_16s_ease_infinite] shadow-lg z-10 max-w-fit border-none">
<Card
className="absolute right-[10px] top-[30px] animate-[levitate_16s_ease_infinite] z-10 max-w-fit border-none"
shadow="lg"
>
<CardBody>
<Spinner color="secondary" size="xl" />
<Spinner color="secondary" size="lg" />
</CardBody>
</Card>
<Card
isFooterBlurred
className="absolute right-[60px] top-[100px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
radius="2xl"
>
<Image
alt="Woman listing to music"
@ -141,9 +144,9 @@ export const FloatingComponents: React.FC<{}> = () => {
src="/images/hero-card.webp"
width={200}
/>
<CardFooter className="before:bg-white/10 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
<p className="text-xs text-white/80">Available soon.</p>
<Button color="secondary" radius="full" size="xs">
<Button className="text-tiny" color="secondary" radius="full" size="sm">
Notify me
</Button>
</CardFooter>

2
apps/docs/components/marketing/hero/floating-tabs.tsx
View File

@ -12,7 +12,7 @@ export const FloatingTabs: React.FC<{}> = () => {
tabList: "max-w-[200px] shadow-sm",
}}
radius="full"
size="xs"
size="sm"
>
<Tab key="notes" title="Notes" />
<Tab key="tasks" title="Tasks" />

6
apps/docs/components/marketing/support.tsx
View File

@ -58,10 +58,10 @@ const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
size = isMobile ? "sm" : "md";
break;
case SPONSOR_TIERS.GOLD:
size = isMobile ? "lg" : "xl";
size = isMobile ? "md" : "lg";
break;
case SPONSOR_TIERS.PLATINUM:
size = isMobile ? "lg" : "xl";
size = isMobile ? "md" : "lg";
break;
default:
size = isMobile ? "sm" : "md";
@ -174,7 +174,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
color="secondary"
content={"Become a sponsor"}
offset={10}
radius="xl"
radius="full"
>
<Button
isIconOnly

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

@ -136,10 +136,10 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
<motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
<DropdownTrigger>
<Button
className="hidden min-w-fit max-w-[64px] sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
endContent={<ChevronDownIcon className="text-xs" />}
className="hidden text-xs h-6 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="xs"
size="sm"
variant="flat"
>
v2.0.0

2
apps/docs/components/sandpack/bugreport-button.tsx
View File

@ -24,7 +24,7 @@ export const BugReportButton = () => {
isIconOnly
as={Link}
href={`${ISSUE_REPORT_URL}${componentTitle}`}
size="xs"
size="sm"
title="Report a bug"
variant="light"
>

2
apps/docs/components/sandpack/codesandbox-button.tsx
View File

@ -13,7 +13,7 @@ export const CodeSandboxButton = () => {
placement="top"
radius="md"
>
<Button isIconOnly as="span" size="xs" title="Open in CodeSandbox" variant="light">
<Button isIconOnly as="span" size="sm" title="Open in CodeSandbox" variant="light">
<UnstyledOpenInCodeSandboxButton
style={{
width: "100%",

2
apps/docs/components/sandpack/copy-button.tsx
View File

@ -23,7 +23,7 @@ export const CopyButton = () => {
content={copied ? "Copied!" : "Copy"}
radius="md"
>
<Button isIconOnly size="xs" title="Copy Code" variant="light" onClick={copyHandler}>
<Button isIconOnly size="sm" title="Copy Code" variant="light" onClick={copyHandler}>
<CopyLinearIcon className="text-zinc-500" height={16} width={16} />
</Button>
</Tooltip>

2
apps/docs/components/sandpack/language-selector.tsx
View File

@ -29,7 +29,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
}}
radius="lg"
selectedKey={template}
size="xs"
size="sm"
onSelectionChange={handleToggle}
>
<Tab

18
apps/docs/components/sandpack/sandpack.tsx
View File

@ -37,18 +37,12 @@ export const Sandpack: FC<SandpackProps> = ({
}) => {
const editorContainerRef = useRef(null);
const {
files,
decorators,
customSetup,
sandpackTemplate,
hasTypescript,
setCurrentTemplate,
} = useSandpack({
files: filesProp,
template,
highlightedLines,
});
const {files, decorators, customSetup, sandpackTemplate, hasTypescript, setCurrentTemplate} =
useSandpack({
files: filesProp,
template,
highlightedLines,
});
return (
<SandpackProvider

10
apps/docs/content/components/accordion/custom-styles.ts
View File

@ -191,10 +191,10 @@ import {InvalidCardIcon} from "./InvalidCardIcon";
export default function App() {
const itemClasses = {
base: "py-0 w-full",
title: "font-normal text-base",
title: "font-normal text-medium",
trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
indicator: "text-base",
content: "text-sm px-2",
indicator: "text-medium",
content: "text-small px-2",
};
const defaultContent =
@ -203,7 +203,7 @@ export default function App() {
return (
<Accordion
hideDivider
showDivider={false}
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
variant="shadow"
itemClasses={itemClasses}
@ -249,7 +249,7 @@ export default function App() {
title={
<p className="flex gap-1 items-center">
Card expired
<p className="text-default-400 text-sm">*4812</p>
<p className="text-default-400 text-small">*4812</p>
</p>
}
>

6
apps/docs/content/components/accordion/start-content.ts
View File

@ -13,7 +13,7 @@ export default function App() {
<Avatar
isBordered
color="primary"
radius="xl"
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
}
@ -29,7 +29,7 @@ export default function App() {
<Avatar
isBordered
color="success"
radius="xl"
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
}
@ -45,7 +45,7 @@ export default function App() {
<Avatar
isBordered
color="warning"
radius="xl"
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
/>
}

2
apps/docs/content/components/avatar/group-custom-count.ts
View File

@ -7,7 +7,7 @@ export default function App() {
max={3}
total={10}
renderCount={(count) => (
<p className="text-sm text-foreground font-medium ml-2">+{count} others</p>
<p className="text-small text-foreground font-medium ml-2">+{count} others</p>
)}
>
<Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />

3
apps/docs/content/components/avatar/radius.ts
View File

@ -4,12 +4,9 @@ export default function App() {
return (
<div className="flex gap-4 items-center">
<Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
<Avatar isBordered radius="2xl" src="https://i.pravatar.cc/150?u=a0423b7422f0e6002d" />
<Avatar isBordered radius="xl" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
<Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
<Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
<Avatar isBordered radius="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
<Avatar isBordered radius="none" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
</div>
);
}`;

4
apps/docs/content/components/avatar/sizes.ts
View File

@ -3,12 +3,10 @@ const App = `import {Avatar} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4 items-center">
<Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" size="xs" />
<Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" size="sm" />
<Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" size="md" />
<Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" size="lg" />
<Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" size="xl" />
<Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" className="w-20 h-20 text-lg" />
<Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" className="w-20 h-20 text-large" />
</div>
);
}`;

2
apps/docs/content/components/badge/a11y.ts
View File

@ -25,9 +25,9 @@ export default function App() {
return (
<Badge content="99+" shape="circle" color="danger">
<Button
radius="full"
isIconOnly
aria-label="more than 99 notifications"
radius="full"
variant="light"
>
<NotificationIcon size={24} />

12
apps/docs/content/components/badge/colors.ts
View File

@ -5,37 +5,37 @@ export default function App() {
<div className="flex gap-3 items-center">
<Badge content="5" color="default">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
/>
</Badge>
<Badge content="5" color="primary">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
/>
</Badge>
<Badge content="5" color="secondary">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
/>
</Badge>
<Badge content="5" color="success">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
/>
</Badge>
<Badge content="5" color="warning">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
/>
</Badge>
<Badge content="5" color="danger">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
</Badge>

6
apps/docs/content/components/badge/content-examples.ts
View File

@ -53,7 +53,7 @@ export default function App() {
<div className="flex gap-5 items-center">
<Badge content="5" color="danger">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
</Badge>
@ -66,7 +66,7 @@ export default function App() {
<Badge content="new" color="danger" size="sm">
<Avatar
isBordered
radius="lg"
radius="md"
color="danger"
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
/>
@ -80,7 +80,7 @@ export default function App() {
<Avatar
isBordered
color="success"
radius="lg"
radius="md"
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
/>
</Badge>

2
apps/docs/content/components/badge/disable-outline.ts
View File

@ -6,7 +6,7 @@ export default function App() {
<Badge content="5" color="danger" shape="rectangle" disableOutline>
<Avatar
isBordered
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
/>
</Badge>

2
apps/docs/content/components/badge/index.ts
View File

@ -2,7 +2,6 @@ import usage from "./usage";
import sizes from "./sizes";
import colors from "./colors";
import variants from "./variants";
import radius from "./radius";
import placements from "./placements";
import shapes from "./shapes";
import visibility from "./visibility";
@ -15,7 +14,6 @@ export const badgeContent = {
sizes,
colors,
variants,
radius,
placements,
shapes,
visibility,

8
apps/docs/content/components/badge/placements.ts
View File

@ -6,28 +6,28 @@ export default function App() {
<Badge content="5" color="danger" placement="top-right">
<Avatar
isBordered
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
/>
</Badge>
<Badge content="5" color="danger" placement="bottom-right">
<Avatar
isBordered
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
/>
</Badge>
<Badge content="5" color="danger" placement="top-left">
<Avatar
isBordered
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
/>
</Badge>
<Badge content="5" color="danger" placement="bottom-left">
<Avatar
isBordered
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
/>
</Badge>

58
apps/docs/content/components/badge/radius.ts
View File

@ -1,58 +0,0 @@
const App = `import {Badge, Avatar} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-3 items-center">
<Badge content="5" radius="full" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
</Badge>
<Badge content="5" radius="xl" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
/>
</Badge>
<Badge content="5" radius="lg" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
/>
</Badge>
<Badge content="5" radius="md" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
/>
</Badge>
<Badge content="5" radius="sm" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114a29026708c"
/>
</Badge>
<Badge content="5" radius="base" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=bfe358194b29026708c"
/>
</Badge>
<Badge content="5" radius="none" color="secondary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114c29026708c"
/>
</Badge>
</div>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

2
apps/docs/content/components/badge/shapes.ts
View File

@ -6,7 +6,7 @@ export default function App() {
<Badge content="5" color="danger" shape="rectangle">
<Avatar
isBordered
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
/>
</Badge>

18
apps/docs/content/components/badge/sizes.ts
View File

@ -3,36 +3,24 @@ const App = `import {Badge, Avatar} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-3 items-center">
<Badge content="5" size="xs" color="primary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
/>
</Badge>
<Badge content="5" size="sm" color="primary">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
/>
</Badge>
<Badge content="5" size="md" color="primary">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
/>
</Badge>
<Badge content="5" size="lg" color="primary">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
/>
</Badge>
<Badge content="5" size="xl" color="primary">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
/>
</Badge>
</div>
);
}`;

3
apps/docs/content/components/badge/usage.ts
View File

@ -4,7 +4,8 @@ export default function App() {
return (
<Badge content="5" color="primary">
<Avatar
radius="lg"
radius="md"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
/>
</Badge>

8
apps/docs/content/components/badge/variants.ts
View File

@ -5,25 +5,25 @@ export default function App() {
<div className="flex gap-3 items-center">
<Badge content="5" color="warning" variant="solid">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
/>
</Badge>
<Badge content="5" color="warning" variant="flat">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
/>
</Badge>
<Badge content="5" color="warning" variant="faded">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
/>
</Badge>
<Badge content="5" color="warning" variant="shadow">
<Avatar
radius="lg"
radius="md"
src="https://i.pravatar.cc/150?u=a04258114e29026302d"
/>
</Badge>

2
apps/docs/content/components/button/index.ts
View File

@ -1,9 +1,9 @@
import usage from "./usage";
import sizes from "./sizes";
import radius from "./radius";
import disabled from "./disabled";
import colors from "./colors";
import variants from "./variants";
import radius from "./radius";
import loading from "./loading";
import loadingCustom from "./loading-custom";
import icons from "./icons";

16
apps/docs/content/components/button/radius.ts
View File

@ -4,25 +4,19 @@ export default function App() {
return (
<div className="flex gap-4 items-center">
<Button radius="full">
Button
Full
</Button>
<Button radius="2xl">
Button
</Button>
<Button radius="xl">
Button
</Button>
<Button radius="lg">
Button
Large
</Button>
<Button radius="md">
Button
Medium
</Button>
<Button radius="sm">
Button
Small
</Button>
<Button radius="none">
Button
None
</Button>
</div>
);

14
apps/docs/content/components/button/sizes.ts
View File

@ -3,20 +3,14 @@ const App = `import {Button} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4 items-center">
<Button size="xs" radius="md">
Button
</Button>
<Button size="sm" radius="md">
Button
<Button size="sm">
Small
</Button>
<Button size="md">
Button
Medium
</Button>
<Button size="lg">
Button
</Button>
<Button size="xl" radius="xl">
Button
Large
</Button>
</div>
);

6
apps/docs/content/components/card/blurred-footer.ts
View File

@ -14,9 +14,9 @@ export default function App() {
src="/images/hero-card.jpeg"
width={200}
/>
<CardFooter className="before:bg-white/10 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
<p className="text-xs text-white/80">Available soon.</p>
<Button color="secondary" radius="full" size="xs">
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden justify-between py-2 absolute before:rounded-xl rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-lg ml-1 z-10">
<p className="text-tiny text-white/80">Available soon.</p>
<Button className="text-tiny" color="secondary" radius="full" size="sm">
Notify me
</Button>
</CardFooter>

11
apps/docs/content/components/card/blurred.ts
View File

@ -155,8 +155,7 @@ export default function App() {
<Card
isBlurred
className="border-none bg-background/60 dark:bg-default-100/50 max-w-[610px]"
radius="2xl"
shadow="lg"
shadow="sm"
>
<CardBody>
<div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
@ -175,8 +174,8 @@ export default function App() {
<div className="flex justify-between items-start">
<div className="flex flex-col gap-0">
<h3 className="font-semibold text-foreground/90">Daily Mix</h3>
<p className="text-sm text-foreground/80">12 Tracks</p>
<h1 className="text-lg font-medium mt-2">Frontend Radio</h1>
<p className="text-small text-foreground/80">12 Tracks</p>
<h1 className="text-large font-medium mt-2">Frontend Radio</h1>
</div>
<Button
isIconOnly
@ -204,8 +203,8 @@ export default function App() {
value={33}
/>
<div className="flex justify-between">
<p className="text-sm">1:23</p>
<p className="text-sm text-foreground/50">4:32</p>
<p className="text-small">1:23</p>
<p className="text-small text-foreground/50">4:32</p>
</div>
</div>

16
apps/docs/content/components/card/composition.ts
View File

@ -9,22 +9,22 @@ export default function App() {
<div className="flex gap-5">
<Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
<div className="flex flex-col gap-1 items-start justify-center">
<h4 className="text-sm font-semibold leading-none text-default-600">Zoey Lang</h4>
<h5 className="text-sm tracking-tight text-default-400">@zoeylang</h5>
<h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
<h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>
</div>
</div>
<Button
className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
color="primary"
radius="full"
size="sm"
size="md"
variant={isFollowed ? "bordered" : "solid"}
onPress={() => setIsFollowed(!isFollowed)}
>
{isFollowed ? "Unfollow" : "Follow"}
</Button>
</CardHeader>
<CardBody className="px-3 py-0 text-sm text-default-400">
<CardBody className="px-3 py-0 text-small text-default-400">
<p>
Frontend developer and UI/UX enthusiast. Join me on this coding adventure!
</p>
@ -37,12 +37,12 @@ export default function App() {
</CardBody>
<CardFooter className="gap-3">
<div className="flex gap-1">
<p className="font-semibold text-default-400 text-sm">4</p>
<p className=" text-default-400 text-sm">Following</p>
<p className="font-semibold text-default-400 text-small">4</p>
<p className=" text-default-400 text-small">Following</p>
</div>
<div className="flex gap-1">
<p className="font-semibold text-default-400 text-sm">97.1K</p>
<p className="text-default-400 text-sm">Followers</p>
<p className="font-semibold text-default-400 text-small">97.1K</p>
<p className="text-default-400 text-small">Followers</p>
</div>
</CardFooter>
</Card>

30
apps/docs/content/components/card/cover-image.ts
View File

@ -5,8 +5,8 @@ export default function App() {
<div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
<Card className="col-span-12 sm:col-span-4 h-[300px]">
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
<p className="text-xs text-white/60 uppercase font-bold">What to watch</p>
<h4 className="text-white font-medium text-lg">Stream the Acme event</h4>
<p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
<h4 className="text-white font-medium text-large">Stream the Acme event</h4>
</CardHeader>
<Image
removeWrapper
@ -17,8 +17,8 @@ export default function App() {
</Card>
<Card className="col-span-12 sm:col-span-4 h-[300px]">
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
<p className="text-xs text-white/60 uppercase font-bold">Plant a tree</p>
<h4 className="text-white font-medium text-lg">Contribute to the planet</h4>
<p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
<h4 className="text-white font-medium text-large">Contribute to the planet</h4>
</CardHeader>
<Image
removeWrapper
@ -29,8 +29,8 @@ export default function App() {
</Card>
<Card className="col-span-12 sm:col-span-4 h-[300px]">
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
<p className="text-xs text-white/60 uppercase font-bold">Supercharged</p>
<h4 className="text-white font-medium text-lg">Creates beauty like a beast</h4>
<p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
<h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
</CardHeader>
<Image
removeWrapper
@ -41,7 +41,7 @@ export default function App() {
</Card>
<Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
<CardHeader className="absolute z-10 top-1 flex-col items-start">
<p className="text-xs text-white/60 uppercase font-bold">New</p>
<p className="text-tiny text-white/60 uppercase font-bold">New</p>
<h4 className="text-black font-medium text-2xl">Acme camera</h4>
</CardHeader>
<Image
@ -50,19 +50,19 @@ export default function App() {
className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
src="/images/card-example-6.jpeg"
/>
<CardFooter className="absolute bg-white/30 bottom-0 border-t border-zinc-100/50 z-10 justify-between">
<CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
<div>
<p className="text-black text-xs">Available soon.</p>
<p className="text-black text-xs">Get notified.</p>
<p className="text-black text-tiny">Available soon.</p>
<p className="text-black text-tiny">Get notified.</p>
</div>
<Button color="primary" radius="full" size="sm">
<Button className="text-tiny" color="primary" radius="full" size="sm">
Notify Me
</Button>
</CardFooter>
</Card>
<Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-7">
<CardHeader className="absolute z-10 top-1 flex-col items-start">
<p className="text-xs text-white/60 uppercase font-bold">Your day your way</p>
<p className="text-tiny text-white/60 uppercase font-bold">Your day your way</p>
<h4 className="text-white/90 font-medium text-xl">Your checklist for better sleep</h4>
</CardHeader>
<Image
@ -71,7 +71,7 @@ export default function App() {
className="z-0 w-full h-full object-cover"
src="/images/card-example-5.jpeg"
/>
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t border-default-600 dark:border-default-100">
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
<div className="flex flex-grow gap-2 items-center">
<img
alt="Breathing app icon"
@ -79,8 +79,8 @@ export default function App() {
src="/images/breathing-app-icon.jpeg"
/>
<div className="flex flex-col">
<p className="text-xs text-white/60">Breathing App</p>
<p className="text-xs text-white/60">Get a good night's sleep.</p>
<p className="text-tiny text-white/60">Breathing App</p>
<p className="text-tiny text-white/60">Get a good night's sleep.</p>
</div>
</div>
<Button radius="full" size="sm">Get App</Button>

2
apps/docs/content/components/card/divider.ts
View File

@ -13,7 +13,7 @@ export default function App() {
/>
<div className="flex flex-col">
<p className="text-md">NextUI</p>
<p className="text-sm text-default-500">nextui.org</p>
<p className="text-small text-default-500">nextui.org</p>
</div>
</CardHeader>
<Divider/>

4
apps/docs/content/components/card/image.ts
View File

@ -4,9 +4,9 @@ export default function App() {
return (
<Card className="py-4">
<CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
<p className="text-xs uppercase font-bold">Daily Mix</p>
<p className="text-tiny uppercase font-bold">Daily Mix</p>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-lg">Frontend Radio</h4>
<h4 className="font-bold text-large">Frontend Radio</h4>
</CardHeader>
<CardBody className="overflow-visible py-2">
<Image

6
apps/docs/content/components/card/primary-action.ts
View File

@ -47,18 +47,18 @@ export default function App() {
return (
<div className="gap-2 grid grid-cols-2 sm:grid-cols-4">
{list.map((item, index) => (
<Card key={index} isPressable onPress={() => console.log("item pressed")}>
<Card shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
<CardBody className="overflow-visible p-0">
<Image
shadow="lg"
radius="xl"
radius="lg"
width="100%"
alt={item.title}
className="w-full object-cover h-[140px]"
src={item.img}
/>
</CardBody>
<CardFooter className="text-sm justify-between">
<CardFooter className="text-small justify-between">
<b>{item.title}</b>
<p className="text-default-500">{item.price}</p>
</CardFooter>

2
apps/docs/content/components/checkbox-group/controlled.ts
View File

@ -15,7 +15,7 @@ export default function App() {
<Checkbox value="sydney">Sydney</Checkbox>
<Checkbox value="san-francisco">San Francisco</Checkbox>
</CheckboxGroup>
<p className="text-default-500 text-sm">Selected: {selected.join(", ")}</p>
<p className="text-default-500 text-small">Selected: {selected.join(", ")}</p>
</div>
);
}`;

8
apps/docs/content/components/checkbox-group/custom-styles.ts
View File

@ -17,17 +17,17 @@ export const CustomCheckbox = ({ user, statusColor, value }) => {
>
<div className="w-full flex justify-between gap-2">
<User
avatarProps={{ size: "sm", src: user.avatar }}
avatarProps={{ size: "md", src: user.avatar }}
description={
<Link isExternal href={user.url} size="xs">
<Link isExternal href={user.url} size="sm">
@{user.username}
</Link>
}
name={user.name}
/>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-default-500">{user.role}</span>
<Chip color={statusColor} size="xs" variant="flat">
<span className="text-tiny text-default-500">{user.role}</span>
<Chip color={statusColor} size="sm" variant="flat">
{user.status}
</Chip>
</div>

8
apps/docs/content/components/checkbox/custom-styles.ts
View File

@ -29,17 +29,17 @@ export default function App() {
>
<div className="w-full flex justify-between gap-2">
<User
avatarProps={{size: "sm", src: user.avatar}}
avatarProps={{size: "md", src: user.avatar}}
description={
<Link isExternal href={user.url} size="xs">
<Link isExternal href={user.url} size="sm">
@{user.username}
</Link>
}
name={user.name}
/>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-default-500">{user.role}</span>
<Chip color="secondary" size="xs" variant="flat">
<span className="text-tiny text-default-500">{user.role}</span>
<Chip color="success" size="sm" variant="flat">
{user.status}
</Chip>
</div>

10
apps/docs/content/components/checkbox/radius.ts
View File

@ -3,11 +3,11 @@ const App = `import {Checkbox} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Checkbox defaultSelected radius="full">Option</Checkbox>
<Checkbox defaultSelected radius="lg">Option</Checkbox>
<Checkbox defaultSelected radius="md">Option</Checkbox>
<Checkbox defaultSelected radius="sm">Option</Checkbox>
<Checkbox defaultSelected radius="none">Option</Checkbox>
<Checkbox defaultSelected radius="full">Full</Checkbox>
<Checkbox defaultSelected radius="lg">Large</Checkbox>
<Checkbox defaultSelected radius="md">Medium</Checkbox>
<Checkbox defaultSelected radius="sm">Small</Checkbox>
<Checkbox defaultSelected radius="none">None</Checkbox>
</div>
);
}`;

8
apps/docs/content/components/checkbox/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {Checkbox} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Checkbox defaultSelected size="xs">Option</Checkbox>
<Checkbox defaultSelected size="sm">Option</Checkbox>
<Checkbox defaultSelected size="md">Option</Checkbox>
<Checkbox defaultSelected size="lg">Option</Checkbox>
<Checkbox defaultSelected size="xl">Option</Checkbox>
<Checkbox defaultSelected size="sm">Small</Checkbox>
<Checkbox defaultSelected size="md">Medium</Checkbox>
<Checkbox defaultSelected size="lg">Large</Checkbox>
</div>
);
}`;

2
apps/docs/content/components/chip/avatar.ts
View File

@ -17,7 +17,7 @@ export default function App() {
<Chip
variant="flat"
avatar={
<Avatar name="JW" size="xs" getInitials={(name) => name.charAt(0)} />
<Avatar name="JW" size="sm" getInitials={(name) => name.charAt(0)} />
}
>
Avatar

2
apps/docs/content/components/chip/custom-styles.ts
View File

@ -5,7 +5,7 @@ export default function App() {
<Chip
variant="shadow"
classNames={{
base: "bg-gradient-to-br from-indigo-500 to-pink-500 border border-white/50 shadow-pink-500/30",
base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
content: "drop-shadow shadow-black text-white",
}}
>

9
apps/docs/content/components/chip/radius.ts
View File

@ -3,11 +3,10 @@ const App = `import {Chip} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Chip radius="full">Chip</Chip>
<Chip radius="lg">Chip</Chip>
<Chip radius="md">Chip</Chip>
<Chip radius="sm">Chip</Chip>
<Chip radius="none">Chip</Chip>
<Chip radius="full">Full</Chip>
<Chip radius="lg">Large</Chip>
<Chip radius="md">Medium</Chip>
<Chip radius="sm">Small</Chip>
</div>
);
}`;

8
apps/docs/content/components/chip/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {Chip} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Chip size="xs">Chip</Chip>
<Chip size="sm">Chip</Chip>
<Chip size="md">Chip</Chip>
<Chip size="lg">Chip</Chip>
<Chip size="xl">Chip</Chip>
<Chip size="sm">Small</Chip>
<Chip size="md">Medium</Chip>
<Chip size="lg">Large</Chip>
</div>
);
}`;

2
apps/docs/content/components/circular-progress/custom-styles.ts
View File

@ -20,7 +20,7 @@ export default function App() {
<Chip
classNames={{
base: "border-1 border-white/30",
content: "text-white/90 text-sm font-semibold",
content: "text-white/90 text-small font-semibold",
}}
variant="bordered"
>

2
apps/docs/content/components/circular-progress/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {CircularProgress} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<CircularProgress size="xs" aria-label="Loading..."/>
<CircularProgress size="sm" aria-label="Loading..."/>
<CircularProgress size="md" aria-label="Loading..."/>
<CircularProgress size="lg" aria-label="Loading..."/>
<CircularProgress size="xl" aria-label="Loading..."/>
</div>
);
}`;

2
apps/docs/content/components/circular-progress/value-formatting.ts
View File

@ -4,7 +4,7 @@ export default function App() {
return (
<CircularProgress
label="Speed"
size="xl"
size="lg"
value={70}
color="success"
formatOptions={{ style: "unit", unit: "kilometer" }}

2
apps/docs/content/components/code/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {Code} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Code size="xs">npm install @nextui-org/react</Code>
<Code size="sm">npm install @nextui-org/react</Code>
<Code size="md">npm install @nextui-org/react</Code>
<Code size="lg">npm install @nextui-org/react</Code>
<Code size="xl">npm install @nextui-org/react</Code>
</div>
);
}`;

6
apps/docs/content/components/divider/usage.ts
View File

@ -4,11 +4,11 @@ export default function App() {
return (
<div className="max-w-md">
<div className="space-y-1">
<h4 className="text-base font-medium">NextUI Components</h4>
<p className="text-sm text-default-400">Beautiful, fast and modern React UI library.</p>
<h4 className="text-medium font-medium">NextUI Components</h4>
<p className="text-small text-default-400">Beautiful, fast and modern React UI library.</p>
</div>
<Divider className="my-4" />
<div className="flex h-5 items-center space-x-4 text-sm">
<div className="flex h-5 items-center space-x-4 text-small">
<div>Blog</div>
<Divider orientation="vertical" />
<div>Docs</div>

8
apps/docs/content/components/dropdown/custom-items-styles.ts
View File

@ -28,9 +28,9 @@ export default function App() {
return (
<Dropdown
showArrow
radius="lg"
radius="sm"
classNames={{
base: "p-0 border border-divider bg-background",
base: "p-0 border-small border-divider bg-background",
arrow: "bg-default-200",
}}
>
@ -80,7 +80,7 @@ export default function App() {
<DropdownItem key="settings">Settings</DropdownItem>
<DropdownItem
key="new_project"
endContent={<PlusIcon className="text-lg" />}
endContent={<PlusIcon className="text-large" />}
>
New Project
</DropdownItem>
@ -96,7 +96,7 @@ export default function App() {
className="cursor-default"
endContent={
<select
className="z-10 outline-none w-16 py-0.5 rounded-md text-xs group-data-[hover=true]:border-default-500 border border-boundary bg-transparent text-default-500"
className="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
id="theme"
name="theme"
>

1
apps/docs/content/components/dropdown/multiple-selection.ts
View File

@ -21,6 +21,7 @@ export default function App() {
<DropdownMenu
aria-label="Single selection actions"
variant="flat"
closeOnSelect={false}
disallowEmptySelection
selectionMode="multiple"
selectedKeys={selectedKeys}

1
apps/docs/content/components/index.ts
View File

@ -29,3 +29,4 @@ export * from "./modal";
export * from "./pagination";
export * from "./dropdown";
export * from "./navbar";
export * from "./table";

4
apps/docs/content/components/input/colors.ts
View File

@ -11,7 +11,7 @@ export default function App() {
];
return (
<div className="w-full flex flex-row gap-4">
<div className="w-full flex flex-row flex-wrap gap-4">
{colors.map((color) => (
<Input
key={color}
@ -20,7 +20,7 @@ export default function App() {
label="Email"
placeholder="Enter your email"
defaultValue="junior@nextui.org"
className="min-w-[220px]"
className="max-w-[220px]"
/>
))}
</div>

2
apps/docs/content/components/input/controlled.ts
View File

@ -11,7 +11,7 @@ export default function App() {
value={value}
onValueChange={setValue}
/>
<p className="text-default-500 text-sm">Input value: {value}</p>
<p className="text-default-500 text-small">Input value: {value}</p>
</div>
);
}`;

2
apps/docs/content/components/input/custom-styles.ts
View File

@ -35,7 +35,7 @@ export default function App() {
<Input
label="Search"
isClearable
radius="xl"
radius="lg"
classNames={{
label: "text-black/50 dark:text-white/90",
input: [

6
apps/docs/content/components/input/radius.ts
View File

@ -3,16 +3,14 @@ const App = `import {Input} from "@nextui-org/react";
export default function App() {
const radius = [
"full",
"xl",
"lg",
"md",
"sm",
"base",
"none",
];
return (
<div className="w-full flex flex-row gap-4">
<div className="w-full flex flex-row flex-wrap gap-4">
{radius.map((r) => (
<Input
key={r}
@ -21,7 +19,7 @@ export default function App() {
label="Email"
placeholder="Enter your email"
defaultValue="junior@nextui.org"
className="min-w-[220px]"
className="max-w-[220px]"
/>
))}
</div>

2
apps/docs/content/components/input/sizes.ts
View File

@ -2,7 +2,7 @@ const App = `import {Input} from "@nextui-org/react";
export default function App() {
const sizes = ["xs", "sm", "md", "lg", "xl"];
const sizes = ["sm", "md", "lg"];
return (
<div className="w-full flex flex-col gap-4">

18
apps/docs/content/components/input/start-end-content.ts
View File

@ -39,7 +39,7 @@ export default function App() {
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">$</span>
<span className="text-default-400 text-small">$</span>
</div>
}
/>
@ -50,7 +50,7 @@ export default function App() {
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">https://</span>
<span className="text-default-400 text-small">https://</span>
</div>
}
/>
@ -72,7 +72,7 @@ export default function App() {
labelPlacement="outside"
endContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">$</span>
<span className="text-default-400 text-small">$</span>
</div>
}
/>
@ -83,7 +83,7 @@ export default function App() {
labelPlacement="outside"
endContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">.org/</span>
<span className="text-default-400 text-small">.org/</span>
</div>
}
/>
@ -98,7 +98,7 @@ export default function App() {
}
endContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">@gmail.com</span>
<span className="text-default-400 text-small">@gmail.com</span>
</div>
}
/>
@ -108,7 +108,7 @@ export default function App() {
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">$</span>
<span className="text-default-400 text-small">$</span>
</div>
}
endContent={
@ -117,7 +117,7 @@ export default function App() {
Currency
</label>
<select
className="outline-none border-0 bg-transparent text-default-400 text-sm"
className="outline-none border-0 bg-transparent text-default-400 text-small"
id="currency"
name="currency"
>
@ -136,12 +136,12 @@ export default function App() {
labelPlacement="outside"
startContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">https://</span>
<span className="text-default-400 text-small">https://</span>
</div>
}
endContent={
<div className="pointer-events-none flex items-center">
<span className="text-default-400 text-sm">.org</span>
<span className="text-default-400 text-small">.org</span>
</div>
}
/>

8
apps/docs/content/components/link/sizes.ts
View File

@ -3,11 +3,9 @@ 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>
<Link href="#" size="sm">Small</Link>
<Link href="#" size="md">Medium</Link>
<Link href="#" size="lg">Large</Link>
</div>
);
}`;

2
apps/docs/content/components/modal/form.ts
View File

@ -76,7 +76,7 @@ export default function App() {
<div className="flex py-2 px-1 justify-between">
<Checkbox
classNames={{
label: "text-sm",
label: "text-small",
}}
>
Remember me

4
apps/docs/content/components/pagination/custom-styles.ts
View File

@ -5,8 +5,8 @@ export default function App() {
<Pagination
total={10}
classNames={{
base: "gap-0 overflow-visible h-8 rounded border border-divider",
item: "w-8 h-8 text-sm rounded-none bg-transparent",
wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
item: "w-8 h-8 text-small rounded-none bg-transparent",
cursor:
"bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
}}

2
apps/docs/content/components/pagination/sizes.ts
View File

@ -2,7 +2,7 @@ const App = `import {Pagination} from "@nextui-org/react";
export default function App() {
const sizes = ["xs", "sm", "md", "lg", "xl"]
const sizes = ["sm", "md", "lg"]
return (
<div className="flex flex-wrap gap-4 items-center">

4
apps/docs/content/components/popover/arrow.ts
View File

@ -8,8 +8,8 @@ export default function App() {
</PopoverTrigger>
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
</Popover>

4
apps/docs/content/components/popover/backdrop.ts
View File

@ -8,7 +8,7 @@ export default function App() {
<PopoverContent className="w-[240px]">
{(titleProps) => (
<div className="px-1 py-2 w-full">
<p className="text-sm font-bold text-foreground" {...titleProps}>
<p className="text-small font-bold text-foreground" {...titleProps}>
Dimensions
</p>
<div className="mt-2 flex flex-col gap-2 w-full">
@ -33,7 +33,7 @@ export default function App() {
backdrop={backdrop}
>
<PopoverTrigger>
<Button color="warning" className="capitalize">
<Button color="warning" variant="flat" className="capitalize">
{backdrop}
</Button>
</PopoverTrigger>

4
apps/docs/content/components/popover/colors.ts
View File

@ -4,8 +4,8 @@ export default function App() {
const content = (
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
);

6
apps/docs/content/components/popover/controlled.ts
View File

@ -11,12 +11,12 @@ export default function App() {
</PopoverTrigger>
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
</Popover>
<p className="text-sm text-default-400">Open: {isOpen ? "true" : "false"}</p>
<p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
</div>
);
}`;

4
apps/docs/content/components/popover/custom-motion.ts
View File

@ -36,8 +36,8 @@ export default function App() {
</PopoverTrigger>
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
</Popover>

4
apps/docs/content/components/popover/custom-styles.ts
View File

@ -17,10 +17,10 @@ export default function App() {
<PopoverContent>
{(titleProps) => (
<div className="px-1 py-2">
<h3 className="text-sm font-bold" {...titleProps}>
<h3 className="text-small font-bold" {...titleProps}>
Popover Content
</h3>
<div className="text-xs">This is the popover content</div>
<div className="text-tiny">This is the popover content</div>
</div>
)}
</PopoverContent>

18
apps/docs/content/components/popover/custom-trigger.ts
View File

@ -4,13 +4,13 @@ export const UserTwitterCard = () => {
const [isFollowed, setIsFollowed] = React.useState(false);
return (
<Card className="max-w-[300px] border-none bg-transparent">
<Card shadow="none" className="max-w-[300px] border-none bg-transparent">
<CardHeader className="justify-between">
<div className="flex gap-3">
<Avatar isBordered radius="full" size="md" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
<div className="flex flex-col items-start justify-center">
<h4 className="text-sm font-semibold leading-none text-default-600">Zoey Lang</h4>
<h5 className="text-sm tracking-tight text-default-400">@zoeylang</h5>
<h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
<h5 className="text-small tracking-tight text-default-500">@zoeylang</h5>
</div>
</div>
<Button
@ -25,7 +25,7 @@ export const UserTwitterCard = () => {
</Button>
</CardHeader>
<CardBody className="px-3 py-0">
<p className="text-sm pl-px text-default-400">
<p className="text-small pl-px text-default-500">
Full-stack developer, @getnextui lover she/her
<span aria-label="confetti" role="img">
🎉
@ -34,12 +34,12 @@ export const UserTwitterCard = () => {
</CardBody>
<CardFooter className="gap-3">
<div className="flex gap-1">
<p className="font-semibold text-default-400 text-sm">4</p>
<p className=" text-default-400 text-sm">Following</p>
<p className="font-semibold text-default-600 text-small">4</p>
<p className=" text-default-500 text-small">Following</p>
</div>
<div className="flex gap-1">
<p className="font-semibold text-default-400 text-sm">97.1K</p>
<p className="text-default-400 text-sm">Followers</p>
<p className="font-semibold text-default-600 text-small">97.1K</p>
<p className="text-default-500 text-small">Followers</p>
</div>
</CardFooter>
</Card>
@ -64,7 +64,7 @@ export default function App() {
/>
</PopoverTrigger>
<PopoverContent className="p-1">
<UserTwitterCard/>
<UserTwitterCard />
</PopoverContent>
</Popover>
);

4
apps/docs/content/components/popover/offset.ts
View File

@ -8,8 +8,8 @@ export default function App() {
</PopoverTrigger>
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
</Popover>

4
apps/docs/content/components/popover/placements.ts
View File

@ -4,8 +4,8 @@ export default function App() {
const content = (
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
);

4
apps/docs/content/components/popover/title-props.ts
View File

@ -9,10 +9,10 @@ export default function App() {
<PopoverContent>
{(titleProps) => (
<div className="px-1 py-2">
<h3 className="text-sm font-bold" {...titleProps}>
<h3 className="text-small font-bold" {...titleProps}>
Popover Content
</h3>
<div className="text-xs">This is the popover content</div>
<div className="text-tiny">This is the popover content</div>
</div>
)}
</PopoverContent>

4
apps/docs/content/components/popover/usage.ts
View File

@ -8,8 +8,8 @@ export default function App() {
</PopoverTrigger>
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
</Popover>

4
apps/docs/content/components/popover/variants.ts
View File

@ -4,8 +4,8 @@ export default function App() {
const content = (
<PopoverContent>
<div className="px-1 py-2">
<div className="text-sm font-bold">Popover Content</div>
<div className="text-xs">This is the popover content</div>
<div className="text-small font-bold">Popover Content</div>
<div className="text-tiny">This is the popover content</div>
</div>
</PopoverContent>
);

2
apps/docs/content/components/popover/with-form.ts
View File

@ -9,7 +9,7 @@ export default function App() {
<PopoverContent className="w-[240px]">
{(titleProps) => (
<div className="px-1 py-2 w-full">
<p className="text-sm font-bold text-foreground" {...titleProps}>
<p className="text-small font-bold text-foreground" {...titleProps}>
Dimensions
</p>
<div className="mt-2 flex flex-col gap-2 w-full">

2
apps/docs/content/components/progress/indeterminate.ts
View File

@ -3,7 +3,7 @@ const App = `import { Progress } from "@nextui-org/react";
export default function App() {
return (
<Progress
size="xs"
size="sm"
isIndeterminate
aria-label="Loading..."
className="max-w-md"

8
apps/docs/content/components/progress/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {Progress} from "@nextui-org/react";
export default function App() {
return (
<div className="flex flex-col gap-6 w-full max-w-md">
<Progress size="xs" aria-label="Loading..." value={30} />
<Progress size="sm" aria-label="Loading..." value={40} />
<Progress size="md" aria-label="Loading..." value={50} />
<Progress size="lg" aria-label="Loading..." value={60} />
<Progress size="xl" aria-label="Loading..." value={70} />
<Progress size="sm" aria-label="Loading..." value={30} />
<Progress size="md" aria-label="Loading..." value={40} />
<Progress size="lg" aria-label="Loading..." value={50} />
</div>
);
}`;

2
apps/docs/content/components/radio-group/controlled.ts
View File

@ -16,7 +16,7 @@ export default function App() {
<Radio value="london">London</Radio>
<Radio value="tokyo">Tokyo</Radio>
</RadioGroup>
<p className="text-default-500 text-sm">Selected: {selected}</p>
<p className="text-default-500 text-small">Selected: {selected}</p>
</div>
);
}`;

4
apps/docs/content/components/radio-group/custom-impl.ts
View File

@ -32,7 +32,7 @@ export const CustomRadio = (props) => {
<div {...getLabelWrapperProps()}>
{children && <span {...getLabelProps()}>{children}</span>}
{description && (
<span className="text-sm text-foreground opacity-70">{description}</span>
<span className="text-small text-foreground opacity-70">{description}</span>
)}
</div>
</Component>
@ -92,7 +92,7 @@ export const CustomRadio = (props: RadioProps) => {
<div {...getLabelWrapperProps()}>
{children && <span {...getLabelProps()}>{children}</span>}
{description && (
<span className="text-sm text-foreground opacity-70">{description}</span>
<span className="text-small text-foreground opacity-70">{description}</span>
)}
</div>
</Component>

2
apps/docs/content/components/snippet/colors.ts
View File

@ -2,7 +2,7 @@ const App = `import {Snippet} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<div className="flex flex-wrap gap-4">
<Snippet color="default">npm install @nextui-org/react</Snippet>
<Snippet color="primary">npm install @nextui-org/react</Snippet>
<Snippet color="secondary">npm install @nextui-org/react</Snippet>

4
apps/docs/content/components/snippet/sizes.ts
View File

@ -2,12 +2,10 @@ const App = `import {Snippet} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Snippet size="xs">npm install @nextui-org/react</Snippet>
<div className="flex flex-wrap gap-4">
<Snippet size="sm">npm install @nextui-org/react</Snippet>
<Snippet size="md">npm install @nextui-org/react</Snippet>
<Snippet size="lg">npm install @nextui-org/react</Snippet>
<Snippet size="xl">npm install @nextui-org/react</Snippet>
</div>
);
}`;

2
apps/docs/content/components/snippet/variants.ts
View File

@ -2,7 +2,7 @@ const App = `import {Snippet} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<div className="flex flex-wrap gap-4">
<Snippet variant="bordered">npm install @nextui-org/react</Snippet>
<Snippet variant="flat" color="warning">npm install @nextui-org/react</Snippet>
<Snippet variant="solid" color="primary">npm install @nextui-org/react</Snippet>

4
apps/docs/content/components/spinner/label-colors.ts
View File

@ -3,10 +3,10 @@ const App = `import {Spinner} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Spinner label="default" color="default" labelColor="foreground"/>
<Spinner label="Default" color="default" labelColor="foreground"/>
<Spinner label="Primary" color="primary" labelColor="primary"/>
<Spinner label="Secondary" color="secondary" labelColor="secondary"/>
<Spinner label="Success" color="secondary" labelColor="success"/>
<Spinner label="Success" color="success" labelColor="success"/>
<Spinner label="Warning" color="warning" labelColor="warning"/>
<Spinner label="Danger" color="danger" labelColor="danger"/>
</div>

2
apps/docs/content/components/spinner/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {Spinner} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</div>
);
}`;

4
apps/docs/content/components/switch/custom-styles.ts
View File

@ -21,8 +21,8 @@ export default function App() {
}}
>
<div className="flex flex-col gap-1">
<p className="text-base">Enable early access</p>
<p className="text-xs text-default-400">
<p className="text-medium">Enable early access</p>
<p className="text-tiny text-default-400">
Get access to new features before they are released.
</p>
</div>

8
apps/docs/content/components/switch/sizes.ts
View File

@ -3,11 +3,9 @@ const App = `import {Switch} from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Switch defaultSelected size="xs">Option</Switch>
<Switch defaultSelected size="sm">Option</Switch>
<Switch defaultSelected size="md">Option</Switch>
<Switch defaultSelected size="lg">Option</Switch>
<Switch defaultSelected size="xl">Option</Switch>
<Switch defaultSelected size="sm">Small</Switch>
<Switch defaultSelected size="md">Medium</Switch>
<Switch defaultSelected size="lg">Large</Switch>
</div>
);
}`;

5
apps/docs/content/components/table/index.ts Normal file
View File

@ -0,0 +1,5 @@
import usage from "./usage";
export const tableContent = {
usage,
};

43
apps/docs/content/components/table/usage.ts Normal file
View File

@ -0,0 +1,43 @@
const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
export default function App() {
return (
<Table aria-label="Example static collection table">
<TableHeader>
<TableColumn>NAME</TableColumn>
<TableColumn>ROLE</TableColumn>
<TableColumn>STATUS</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell>Tony Reichert</TableCell>
<TableCell>CEO</TableCell>
<TableCell>Active</TableCell>
</TableRow>
<TableRow key="2">
<TableCell>Zoey Lang</TableCell>
<TableCell>Technical Lead</TableCell>
<TableCell>Paused</TableCell>
</TableRow>
<TableRow key="3">
<TableCell>Jane Fisher</TableCell>
<TableCell>Senior Developer</TableCell>
<TableCell>Active</TableCell>
</TableRow>
<TableRow key="4">
<TableCell>William Howard</TableCell>
<TableCell>Community Manager</TableCell>
<TableCell>Vacation</TableCell>
</TableRow>
</TableBody>
</Table>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};

6
apps/docs/content/components/tabs/form.ts
View File

@ -9,7 +9,7 @@ export default function App() {
<CardBody>
<Tabs
fullWidth
size="sm"
size="md"
aria-label="Tabs form"
selectedKey={selected}
onSelectionChange={setSelected}
@ -23,7 +23,7 @@ export default function App() {
placeholder="Enter your password"
type="password"
/>
<p className="text-center text-sm">
<p className="text-center text-small">
Need to create an account?{" "}
<Link size="sm" onPress={() => setSelected("sign-up")}>
Sign up
@ -46,7 +46,7 @@ export default function App() {
placeholder="Enter your password"
type="password"
/>
<p className="text-center text-sm">
<p className="text-center text-small">
Already have an account?{" "}
<Link size="sm" onPress={() => setSelected("login")}>
Login

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