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

refactor(docs): neutral color renamed to default, next.js guide fixed

Browse Source
This commit is contained in:
Junior Garcia 2023-05-27 11:55:59 -03:00
parent 0b3ebbcfdf
commit bee0c50c4b
239 changed files with 1162 additions and 555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/docs/components/bg-grid-container.tsx
View File

@ -16,7 +16,7 @@ export const BgGridContainer: FC<BgGridContainerProps> = ({
return (
<div
className={clsx(
"relative overflow-y-hidden flex items-center border border-neutral-400/50 dark:border-neutral-100/50 px-2 py-4 rounded-lg",
"relative overflow-y-hidden flex items-center border border-default-400/50 dark:border-default-100/50 px-2 py-4 rounded-lg",
"overflow-hidden",
// blur effect
"bg-transparent",

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

@ -49,7 +49,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
</div>
<Button
isIconOnly
className="text-neutral-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
radius="full"
variant="light"
onPress={() => setLiked((v) => !v)}
@ -65,10 +65,10 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
<Progress
aria-label="Music progress"
classNames={{
filler: "bg-neutral-800 dark:bg-white",
track: "bg-neutral-500/30",
filler: "bg-default-800 dark:bg-white",
track: "bg-default-500/30",
}}
color="neutral"
color="default"
size="sm"
value={33}
/>

16
apps/docs/components/demos/user-twitter-card.tsx
View File

@ -15,12 +15,12 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
<div className="flex gap-5">
<Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
<div className="flex flex-col items-start justify-center">
<h4 className="text-sm font-semibold leading-none text-neutral-600">Zoey Lang</h4>
<h5 className="text-sm tracking-tight text-neutral-400">@zoeylang</h5>
<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>
</div>
</div>
<Button
className={isFollowed ? "bg-transparent text-foreground border-neutral-200" : ""}
className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
color="primary"
radius="full"
size="sm"
@ -31,7 +31,7 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
</Button>
</CardHeader>
<CardBody className="px-3 py-0">
<p className="text-sm pl-px text-neutral-400">
<p className="text-sm pl-px text-default-400">
Full-stack developer, @getnextui lover she/her&nbsp;
<span aria-label="confetti" role="img">
🎉
@ -40,12 +40,12 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
</CardBody>
<CardFooter className="gap-3">
<div className="flex gap-1">
<p className="font-semibold text-neutral-400 text-sm">4</p>
<p className=" text-neutral-400 text-sm">Following</p>
<p className="font-semibold text-default-400 text-sm">4</p>
<p className=" text-default-400 text-sm">Following</p>
</div>
<div className="flex gap-1">
<p className="font-semibold text-neutral-400 text-sm">97.1K</p>
<p className="text-neutral-400 text-sm">Followers</p>
<p className="font-semibold text-default-400 text-sm">97.1K</p>
<p className="text-default-400 text-sm">Followers</p>
</div>
</CardFooter>
</Card>

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

@ -2,11 +2,11 @@ import {FC} from "react";
import {tv, VariantProps} from "tailwind-variants";
const blockquote = tv({
base: "border pl-4 bg-neutral-50 my-6 py-3 rounded-xl [&>p]:m-0",
base: "border pl-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",
variants: {
color: {
neutral: "border-neutral-100 bg-neutral-50/20",
default: "border-default-100 bg-default-50/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",
@ -15,7 +15,7 @@ const blockquote = tv({
},
},
defaultVariants: {
color: "neutral",
color: "default",
},
});

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

@ -19,7 +19,7 @@ export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentL
<Button
isExternal
as={Link}
className="text-neutral-700"
className="text-default-700"
href={`https://storiesv2.nextui.org/?path=/story/components-${storybook || component}`}
radius="md"
size="sm"
@ -31,7 +31,7 @@ export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentL
<Button
isExternal
as={Link}
className="text-neutral-700"
className="text-default-700"
href={`https://www.npmjs.com/package/@nextui-org/${component}`}
radius="md"
size="sm"
@ -44,7 +44,7 @@ export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentL
<Button
isExternal
as={Link}
className="text-neutral-700"
className="text-default-700"
href={`https://react-spectrum.adobe.com/react-aria/${reactAriaHook}.html`}
radius="md"
size="sm"
@ -57,7 +57,7 @@ export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentL
<Button
isExternal
as={Link}
className="text-neutral-700"
className="text-default-700"
href={`${COMPONENT_PATH}/${component}`}
radius="md"
size="sm"
@ -69,7 +69,7 @@ export const ComponentLinks = ({component, storybook, reactAriaHook}: ComponentL
<Button
isExternal
as={Link}
className="text-neutral-700"
className="text-default-700"
href={`${COMPONENT_THEME_PATH}/${component}.ts`}
radius="md"
size="sm"

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

@ -33,7 +33,7 @@ export const Frameworks = () => {
<FeaturesGrid
classNames={{
base: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4",
iconWrapper: "bg-neutral-300/20",
iconWrapper: "bg-default-300/20",
body: "py-0",
}}
features={frameworks}

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

@ -123,7 +123,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
"before:mr-4",
"before:content-['']",
"before:block",
"before:bg-neutral-300",
"before:bg-default-300",
"before:w-1",
"before:h-1",
"before:rounded-full",

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

@ -47,7 +47,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
"before:transition-opacity",
"before:mr-3",
"before:block",
"before:bg-neutral-300",
"before:bg-default-300",
"before:w-1",
"before:h-1",
"before:rounded-full",

8
apps/docs/components/marketing/a11y-otb.tsx
View File

@ -64,7 +64,7 @@ const a11yItems = [
},
];
const iconClasses = "text-2xl text-neutral-500 pointer-events-none flex-shrink-0";
const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
export const A11yOtb = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
@ -97,7 +97,7 @@ export const A11yOtb = () => {
NextUI components are built on top of&nbsp;
<NextUILink
isExternal
className="text-xl text-neutral-500 font-light [&>svg]:ml-1"
className="text-xl text-default-500 font-light [&>svg]:ml-1"
href="https://react-spectrum.adobe.com/react-aria/"
underline="always"
>
@ -112,7 +112,7 @@ export const A11yOtb = () => {
classNames={{
base: "grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4",
header: "pb-3",
iconWrapper: "bg-neutral-100 dark:bg-transparent text-neutral-500/50",
iconWrapper: "bg-default-100 dark:bg-transparent text-default-500/50",
}}
features={a11yItems}
/>
@ -164,7 +164,7 @@ export const A11yOtb = () => {
<DropdownMenu
aria-label="Actions"
closeOnSelect={true}
color="neutral"
color="default"
variant="flat"
>
<DropdownSection title="Actions">

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

@ -19,7 +19,7 @@ const themesTabs = (isMobile: boolean) => [
icon: () => (
<NextUILogo
small
className="text-neutral-400 group-data-[selected=true]:text-primary"
className="text-default-400 group-data-[selected=true]:text-primary"
size={isMobile ? 34 : 44}
/>
),
@ -96,7 +96,7 @@ const CustomThemesExample = ({
base: "w-full md:max-w-[50%]",
tab: "px-0 md:px-3 h-auto data-[selected=true]:bg-transparent",
tabList: "w-full md:max-w-1/2 justify-start gap-0 md:gap-4",
tabContent: "text-neutral-400 text-base",
tabContent: "text-default-400 text-base",
}}
items={tabs}
variant="light"

8
apps/docs/components/marketing/custom-themes/styles.ts
View File

@ -43,9 +43,9 @@ export const shopCartStyles = tv({
],
contentWrapper: "flex flex-col justify-center transition-all h-full h-[200px]",
title: ["relative", "w-full", "flex-none", "text-xl", "font-semibold", "text-foreground"],
description: ["my-2", "w-full", "text-base", "text-neutral-500"],
description: ["my-2", "w-full", "text-base", "text-default-500"],
price: "relative text-lg font-semibold text-foreground",
previousPrice: "relative line-through font-semibold text-neutral-400 ml-3",
previousPrice: "relative line-through font-semibold text-default-400 ml-3",
percentOff: "relative font-normal text-success ml-3",
sizeOption: [
"w-8",
@ -59,7 +59,7 @@ export const shopCartStyles = tv({
],
buyButton: ["text-sm", "font-normal"],
addToBagButton: ["text-sm", "font-normal"],
starButton: "absolute top-3 right-3 text-neutral-400 data-[liked=true]:text-warning",
starButton: "absolute top-3 right-3 text-default-400 data-[liked=true]:text-warning",
},
variants: {
theme: {
@ -115,7 +115,7 @@ export const shopCartStyles = tv({
],
price: "font-mono font-thin",
previousPrice: "font-mono font-light ml-2",
percentOff: "text-neutral-500 font-mono text-sm",
percentOff: "text-default-500 font-mono text-sm",
buyButton: ["bg-foreground", "text-background", "text-sm", "font-normal", "rounded-sm"],
addToBagButton: [
"border-foreground",

2
apps/docs/components/marketing/customization.tsx
View File

@ -23,7 +23,7 @@ export const Customization = () => {
NextUI is based on{" "}
<Link
isExternal
className="text-xl text-neutral-500 font-light [&>svg]:ml-1"
className="text-xl text-default-500 font-light [&>svg]:ml-1"
href="https://tailwind-variants.org"
underline="always"
>

4
apps/docs/components/marketing/features-grid.tsx
View File

@ -8,13 +8,13 @@ const styles = tv({
slots: {
base: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
card:
"dark:border-transparent bg-white/5 dark:bg-neutral-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
"dark:border-transparent bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]",
header: "gap-2 pb-0",
body: "",
iconWrapper:
"flex justify-center p-2 rounded-full items-center bg-secondary-100/80 text-pink-500",
title: "text-base font-semibold",
description: "font-light text-base text-neutral-500",
description: "font-light text-base text-default-500",
},
});

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

@ -70,7 +70,7 @@ const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
const getSponsorColor = (sponsor: Sponsor) => {
const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
return SPONSOR_COLORS[tier] || "neutral";
return SPONSOR_COLORS[tier] || "default";
};
const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {

4
apps/docs/components/mdx-components.tsx
View File

@ -21,10 +21,10 @@ const Thead: React.FC<{children?: React.ReactNode}> = ({children}) => {
return (
<thead
className={clsx(
"[&>tr]:h-12 [&>tr>th]:bg-neutral-100",
"[&>tr]:h-12 [&>tr>th]:bg-default-100",
"[&>tr>th]:align-middle",
"[&>tr>th]:py-0",
"[&>tr>th]:text-neutral-500 [&>tr>th]:text-xs",
"[&>tr>th]:text-default-500 [&>tr>th]:text-xs",
"[&>tr>th]:text-left [&>tr>th]:pl-2",
"[&>tr>th:first-child]:rounded-l-lg",
"[&>tr>th:last-child]:rounded-r-lg",

2
apps/docs/components/primitives.ts
View File

@ -37,7 +37,7 @@ export const title = tv({
});
export const subtitle = tv({
base: "w-full md:w-1/2 my-2 text-lg lg:text-xl font-light text-neutral-500 block max-w-full",
base: "w-full md:w-1/2 my-2 text-lg lg:text-xl font-light text-default-500 block max-w-full",
variants: {
fullWidth: {
true: "!w-full",

2
apps/docs/components/theme-switch.tsx
View File

@ -55,7 +55,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
"rounded-lg",
"flex items-center justify-center",
"group-data-[checked=true]:bg-transparent",
"!text-neutral-600 dark:!text-neutral-500",
"!text-default-600 dark:!text-default-500",
"pt-px",
"px-0",
"mx-0",

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

@ -192,7 +192,7 @@ export default function App() {
const itemStyles = {
base: "py-0 w-full",
title: "font-normal text-base",
trigger: "px-2 py-0 hover:bg-neutral-100 rounded-lg h-14 flex items-center",
trigger: "px-2 py-0 hover:bg-default-100 rounded-lg h-14 flex items-center",
indicator: "text-base",
content: "text-sm px-2",
};
@ -249,7 +249,7 @@ export default function App() {
title={
<p className="flex gap-1 items-center">
Card expired
<p className="text-neutral-400 text-sm">*4812</p>
<p className="text-default-400 text-sm">*4812</p>
</p>
}
>

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

@ -3,7 +3,7 @@ const App = `import { Avatar } from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4 items-center">
<Avatar isBordered color="neutral" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
<Avatar isBordered color="default" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
<Avatar isBordered color="primary" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
<Avatar isBordered color="secondary" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
<Avatar isBordered color="success" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />

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

@ -25,7 +25,7 @@ export default function App() {
return (
<div className="flex gap-4 items-center">
<Avatar showFallback src='https://images.unsplash.com/broken' fallback={
<CameraIcon className="animate-pulse w-6 h-6 text-neutral-500" fill="currentColor" size={20} />
<CameraIcon className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
} />
<Avatar showFallback name='Jane' src='https://images.unsplash.com/broken' />
<Avatar name='Joe' src='https://images.unsplash.com/broken' />

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

@ -3,7 +3,7 @@ const App = `import { Badge, Avatar } from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-3 items-center">
<Badge content="5" color="neutral">
<Badge content="5" color="default">
<Avatar
radius="lg"
src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"

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

@ -3,8 +3,8 @@ const App = `import { Button } from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4 items-center">
<Button color="neutral">
Neutral
<Button color="default">
default
</Button>
<Button color="primary">
Primary

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

@ -154,7 +154,7 @@ export default function App() {
return (
<Card
isBlurred
className="border-none bg-white/20 dark:bg-neutral-100/50 max-w-[610px]"
className="border-none bg-white/20 dark:bg-default-100/50 max-w-[610px]"
radius="2xl"
shadow="lg"
>
@ -180,7 +180,7 @@ export default function App() {
</div>
<Button
isIconOnly
className="text-neutral-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
radius="full"
variant="light"
onPress={() => setLiked((v) => !v)}
@ -196,10 +196,10 @@ export default function App() {
<Progress
aria-label="Music progress"
classNames={{
filler: "bg-neutral-500 dark:bg-white",
track: "bg-neutral-500/30",
filler: "bg-default-500 dark:bg-white",
track: "bg-default-500/30",
}}
color="neutral"
color="default"
size="sm"
value={33}
/>

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

@ -9,12 +9,12 @@ 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-neutral-600">Zoey Lang</h4>
<h5 className="text-sm tracking-tight text-neutral-400">@zoeylang</h5>
<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>
</div>
</div>
<Button
className={isFollowed ? "bg-transparent text-foreground border-neutral-200" : ""}
className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
color="primary"
radius="full"
size="sm"
@ -24,7 +24,7 @@ export default function App() {
{isFollowed ? "Unfollow" : "Follow"}
</Button>
</CardHeader>
<CardBody className="px-3 py-0 text-sm text-neutral-400">
<CardBody className="px-3 py-0 text-sm 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-neutral-400 text-sm">4</p>
<p className=" text-neutral-400 text-sm">Following</p>
<p className="font-semibold text-default-400 text-sm">4</p>
<p className=" text-default-400 text-sm">Following</p>
</div>
<div className="flex gap-1">
<p className="font-semibold text-neutral-400 text-sm">97.1K</p>
<p className="text-neutral-400 text-sm">Followers</p>
<p className="font-semibold text-default-400 text-sm">97.1K</p>
<p className="text-default-400 text-sm">Followers</p>
</div>
</CardFooter>
</Card>

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

@ -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-neutral-600 dark:border-neutral-100">
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t border-default-600 dark:border-default-100">
<div className="flex flex-grow gap-2 items-center">
<img
alt="Breathing app icon"

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-neutral-500">nextui.org</p>
<p className="text-sm text-default-500">nextui.org</p>
</div>
</CardHeader>
<Divider/>

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

@ -5,7 +5,7 @@ export default function App() {
<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>
<small className="text-neutral-500">12 Tracks</small>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-lg">Frontend Radio</h4>
</CardHeader>
<CardBody className="overflow-visible py-2">

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

@ -60,7 +60,7 @@ export default function App() {
</CardBody>
<CardFooter className="text-sm justify-between">
<b>{item.title}</b>
<p className="text-neutral-500">{item.price}</p>
<p className="text-default-500">{item.price}</p>
</CardFooter>
</Card>
))}

6
apps/docs/content/components/checkbox-group/custom-implementation.ts
View File

@ -22,8 +22,8 @@ import { CheckIcon } from './CheckIcon.jsx'
const checkbox = tv({
slots: {
base: "border-neutral hover:bg-neutral-200",
content: "text-neutral-500"
base: "border-default hover:bg-default-200",
content: "text-default-500"
},
variants: {
isSelected: {
@ -97,7 +97,7 @@ export default function App() {
<CustomCheckbox value="pool">Pool</CustomCheckbox>
<CustomCheckbox value="gym">Gym</CustomCheckbox>
</CheckboxGroup>
<p className="mt-4 ml-1 text-neutral-500">
<p className="mt-4 ml-1 text-default-500">
Selected: {groupSelected.join(", ")}
</p>
</div>

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

@ -26,7 +26,7 @@ export const CustomCheckbox = ({ user, statusColor, value }) => {
name={user.name}
/>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-neutral-500">{user.role}</span>
<span className="text-xs text-default-500">{user.role}</span>
<Chip color={statusColor} size="xs" variant="flat">
{user.status}
</Chip>
@ -101,7 +101,7 @@ export default function App() {
statusColor="secondary"
/>
</CheckboxGroup>
<p className="mt-4 ml-1 text-neutral-500">
<p className="mt-4 ml-1 text-default-500">
Selected: {groupSelected.join(", ")}
</p>
</div>

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

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

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

@ -8,7 +8,7 @@ export default function App() {
<Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
Subscribe (controlled)
</Checkbox>
<p className="text-neutral-500">
<p className="text-default-500">
Selected: {isSelected ? "true" : "false"}
</p>
</div>

4
apps/docs/content/components/checkbox/custom-implementation.ts
View File

@ -22,8 +22,8 @@ import { CheckIcon } from './CheckIcon.jsx'
const checkbox = tv({
slots: {
base: "border-neutral hover:bg-neutral-200",
content: "text-neutral-500"
base: "border-default hover:bg-default-200",
content: "text-default-500"
},
variants: {
isSelected: {

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

@ -38,7 +38,7 @@ export default function App() {
name={user.name}
/>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-neutral-500">{user.role}</span>
<span className="text-xs text-default-500">{user.role}</span>
<Chip color="secondary" size="xs" variant="flat">
{user.status}
</Chip>

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

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

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

@ -3,7 +3,7 @@ const App = `import { CircularProgress } from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<CircularProgress color="neutral" aria-label="Loading..."/>
<CircularProgress color="default" aria-label="Loading..."/>
<CircularProgress color="primary" aria-label="Loading..."/>
<CircularProgress color="secondary" aria-label="Loading..."/>
<CircularProgress color="success" aria-label="Loading..."/>

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

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

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

@ -5,7 +5,7 @@ export default function App() {
<div className="max-w-md">
<div className="space-y-1">
<h4 className="text-base font-medium">NextUI Components</h4>
<p className="text-sm text-neutral-400">Beautiful, fast and modern React UI library.</p>
<p className="text-sm 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">

8
apps/docs/content/components/spacer/usage.ts
View File

@ -2,11 +2,11 @@ const CustomCard = `import { Card } from "@nextui-org/react";
export const CustomCard = () => (
<Card className="w-[200px] space-y-5 p-4" radius="2xl">
<div className="h-24 rounded-lg bg-neutral-300"></div>
<div className="h-24 rounded-lg bg-default-300"></div>
<div className="space-y-3">
<div className="h-3 w-3/5 rounded-lg bg-neutral-200"></div>
<div className="h-3 w-4/5 rounded-lg bg-neutral-200"></div>
<div className="h-3 w-2/5 rounded-lg bg-neutral-300"></div>
<div className="h-3 w-3/5 rounded-lg bg-default-200"></div>
<div className="h-3 w-4/5 rounded-lg bg-default-200"></div>
<div className="h-3 w-2/5 rounded-lg bg-default-300"></div>
</div>
</Card>
);`;

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

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

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

@ -3,7 +3,7 @@ const App = `import { Spinner } from "@nextui-org/react";
export default function App() {
return (
<div className="flex gap-4">
<Spinner label="Neutral" color="neutral" 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"/>

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

@ -147,7 +147,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
| Attribute | Type | Description | Default |
| ------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------- |
| src | `string` | The source URL of the image to be displayed. | - |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | Sets the avatar background color. | `neutral` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | Sets the avatar background color. | `default` |
| radius | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | Sets the avatar border radius. | `full` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | Sets the avatar size. | `md` |
| name | `string` | Displays the initials if the image is not provided or fails to load. | - |

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

@ -82,7 +82,7 @@ Instead, consider supplying a comprehensive description, such as using `aria-lab
| children \* | `ReactNode` | The wrapped component. | - |
| content | `string` \| `number` \| `ReactNode` | The content of the badge. The badge will be rendered relative to its children. | - |
| variant | `solid` \| `flat` \| `faded` \| `shadow` | The variant style of the badge. | `solid` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge. | `neutral` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge. | `default` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the badge. | `md` |
| radius | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the badge. | `full` |
| shape | `circle` \| `rectangle` | The shape of the badge. | `rectangle` |

4
apps/docs/content/docs/components/button.mdx
View File

@ -140,7 +140,7 @@ building buttons that work well across devices and interaction methods.
| children | `ReactNode` | The content to display in the button. | - |
| variant | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The button appearance style. | `solid` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The button size. | `md` |
| color | ``neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The button color theme. | `neutral` |
| color | ``default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The button color theme. | `default` |
| radius | ``none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | The button border radius. | `xl` |
| startIcon | `ReactNode` | The button start content. | - |
| endIcon | `ReactNode` | The button end content. | - |
@ -173,7 +173,7 @@ building buttons that work well across devices and interaction methods.
| children | `ReactNode` \| `ReactNode[]` | The buttons to display. | - |
| variant | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The buttons appearance style. | `solid` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The buttons size. | `md` |
| color | ``neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The buttons color theme. | `neutral` |
| color | ``default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The buttons color theme. | `default` |
| radius | ``none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | The buttons border radius. | `xl` |
| fullWidth | `boolean` | Whether the buttons should take the full width. | `false` |
| isDisabled | `boolean` | Whether the buttons are disabled. | `false` |

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

@ -59,7 +59,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
| value | `string[]` | The current selected values. (controlled). | |
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |

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

@ -122,7 +122,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
| value | `string` | The value of the input element, used when submitting an HTML form. | |
| name | `string` | The name of the input element, used when submitting an HTML form. | |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkbox. | `md` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkbox. | `primary` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkbox. | `primary` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkbox. | `md` |
| lineThrough | `boolean` | Whether the label should be crossed out. | `false` |
| isSelected | `boolean` | Whether the element should be selected (controlled). | |

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

@ -81,7 +81,7 @@ If you pass the `onClose` prop, the close button will be visible. You can overri
| children | `ReactNode` | The content of the chip. | - |
| variant | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The chip appearance style. | `solid` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the chip. | `md` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the chip. | `neutral` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the chip. | `default` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the chip. | `full` |
| avatar | `ReactNode` | Avatar to be rendered in the left side of the chip. | - |
| startContent | `ReactNode` | Element to be rendered in the left side of the chip. This prop overrides the `avatar` prop. | - |

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

@ -95,7 +95,7 @@ option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs
| label | `ReactNode` | The content to display as the label. | - |
| value | `number` | The current value (controlled). | - |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the indicator. | `md` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the indicator. | `primary` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the indicator. | `primary` |
| minValue | `number` | The smallest value allowed for the input. | `0` |
| maxValue | `number` | The largest value allowed for the input. | `100` |
| valueLabel | `ReactNode` | The content to display as the value's label (e.g. 1 of 4). | - |

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

@ -38,5 +38,5 @@ import {Code} from "@nextui-org/react";
| --------- | --------------------------------------------------------------------------- | ------------------------ | --------- |
| children | `ReactNode` | The content of the code. | - |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the code. | `sm` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the code. | `neutral` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the code. | `default` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the code. | `lg` |

4
apps/docs/content/docs/components/spinner.mdx
View File

@ -56,6 +56,6 @@ import {Spinner} from "@nextui-org/react";
| ---------- | --------------------------------------------------------------------------- | -------------------------------------------------------- | --------- |
| label | `string` | The content to display as the label. | - |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the spinner circles. | `md` |
| color | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the spinner circles. | `primary` |
| labelColor | `neutral` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the spinner circles. | `neutral` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the spinner circles. | `primary` |
| labelColor | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the spinner circles. | `default` |
| classNames | `Record<"base"｜"wrapper"｜"circle1"｜"circle2"｜"label", string>` | Allows to set custom class names for the spinner slots. | - |

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

@ -59,25 +59,6 @@ module.exports = {
After installing NextUI, you need to set up the `NextUIProvider` at the `root` of your application.
### Pages Directory Setup
Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`:
```jsx
// pages/_app.js
import { NextUIProvider } from '@nextui-org/react'
function MyApp({ Component, pageProps }) {
return (
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
)
}
export default MyApp;
```
### App directory Setup
Next.js 13 introduces a new `app/` directory structure. By default it uses Server Components.
@ -123,9 +104,9 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
Now you can import any NextUI component directly in your Server Components without needing to use
the `use client;` directive:
```jsx
```jsx {2}
// app/page.tsx
import { Button } from '@nextui-org/react'
import { Button } from '@nextui-org/button'
export default function Page() {
return (
@ -136,6 +117,29 @@ export default function Page() {
}
```
> **Important 🚨**: Note that you need to import the components from their own package, not from `@nextui-org/react`.
<Spacer y={8} />
### Pages Directory Setup
Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`:
```jsx
// pages/_app.js
import { NextUIProvider } from '@nextui-org/react'
function MyApp({ Component, pageProps }) {
return (
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
)
}
export default MyApp;
```
### Setup pnpm (optional)
If you are using pnpm, you need to add the following code to your `.npmrc` file:

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

@ -8,7 +8,7 @@ url: https://nextui.org/docs/guide/introduction
Welcome to the NextUI documentation!
<NextImage priority src="/nextui-banner.png" quality={100} width={500} height={500} alt="NextUI banner" className="w-full border border-transparent dark:border-neutral-200/50 object-fit rounded-xl shadow-lg" />
<NextImage priority src="/nextui-banner.png" quality={100} width={500} height={500} alt="NextUI banner" className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg" />
## What is NextUI?
@ -24,21 +24,21 @@ NextUI's primary goal is to streamline the development process, offering a beaut
### Is NextUI a Vercel related project?
<p class="text-neutral-500">
<p className="text-default-500">
No, NextUI is an independent community project and is not related to Vercel.
</p>
### How is NextUI different from TailwindCSS?
- **TailwindCSS**:
<p class="text-neutral-500">
<p className="text-default-500">
Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components,
leaving you to handle lots of other things like accessibility, component composition, keyboard navigation,
style overrides, etc.
</p>
- **NextUI**:
<p class="text-neutral-500">
<p className="text-default-500">
NextUI is a UI library for React that combines the power of TailwindCSS with React Aria to provide
a complete solution for building accessible and customizable user interfaces. Since NextUI is built upon TailwindCSS,
you can utilize all TailwindCSS classes within your NextUI components, ensuring optimal compiled CSS size.
@ -46,7 +46,7 @@ NextUI's primary goal is to streamline the development process, offering a beaut
### How is NextUI different from TailwindCSS components libraries?
<p class="text-neutral-500">
<p className="text-default-500">
TailwindCSS components libraries such as <Link isExternal href="https://tailwindui.com/">TailwindUI</Link>, <Link isExternal href="https://flowbite.com/">Flowbite</Link>, or <Link isExternal href="https://preline.co/">Preline</Link>, just to name a few, only
offer a curated selection of TailwindCSS classes to style your components. They don't provide any React specific components, logic, props, composition, or accessibility features. In contrast
to these libraries, NextUI is a complete UI library for React that provides a set of accessible and customizable components, hooks, and utilities.
@ -54,27 +54,27 @@ to these libraries, NextUI is a complete UI library for React that provides a se
### How NextUI deals with TailwindCSS classes conflicts?
<p class="text-neutral-500">
<p className="text-default-500">
We created a TailwindCSS utility library called <Link isExternal href="https://www.tailwind-variants.org/">tailwind-variants</Link> that automatically
handle TailwindCSS class conflicts. This ensures your custom classes will consistently override the default ones, eliminating any duplication.
</p>
### Does NextUI use runtime CSS?
<p class="text-neutral-500">
<p className="text-default-500">
No, NextUI version 2 employs TailwindCSS JIT, which generates CSS at build time, eliminating the need for
runtime CSS. This means that NextUI is fully compatible with the latest React and Next.js versions.
</p>
### Does NextUI support TypeScript?
<p class="text-neutral-500">
<p className="text-default-500">
Yes, NextUI is written in TypeScript and has full support for it.
</p>
### Can I use NextUI with other front-end frameworks or libraries?
<p class="text-neutral-500">
<p className="text-default-500">
NextUI is specifically designed for React and is built on top of React Aria. As a result, it is primarily
tailored for React applications. However, you can still use the CSS part of NextUI with other frameworks or
libraries, but you will lose the benefits of React Aria and pre-built accessible components that come with NextUI.

4
apps/docs/content/docs/guide/upgrade-to-v2.mdx
View File

@ -103,7 +103,7 @@ export default MyApp;
```
<Blockquote
color="neutral"
color="default"
>
Make sure to remove all properties from the previous <InlineCode>NextUIProvider</InlineCode> component. Since now the <InlineCode>theme</InlineCode> is handled by the <InlineCode>nextui</InlineCode> Tailwind plugin.
</Blockquote>
@ -148,7 +148,7 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
<Blockquote
color="neutral"
color="default"
>
Please visit the <Link href="https://github.com/nextui-org/nextui/releases/tag/v2.0.0" showAnchorIcon isExternal>Release Notes</Link> for more information about the new features and breaking changes.
</Blockquote>

10
apps/docs/content/landing/index.tsx
View File

@ -220,7 +220,7 @@ import {
DeleteDocumentBulkIcon,
} from "@nextui-org/shared-icons";
const iconClasses = "text-2xl text-neutral-500 pointer-events-none flex-shrink-0";
const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
export const Example = () => {
return (
@ -233,7 +233,7 @@ export const Example = () => {
<DropdownMenu
closeOnSelect
aria-label="Actions"
color="neutral"
color="default"
variant="flat"
>
<DropdownSection title="Actions">
@ -334,7 +334,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
</div>
<Button
isIconOnly
className="text-neutral-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
radius="full"
variant="light"
onPress={() => setLiked((v) => !v)}
@ -351,9 +351,9 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
aria-label="Music progress"
classNames={{
filler: "bg-white",
track: "bg-neutral-500/30",
track: "bg-default-500/30",
}}
color="neutral"
color="default"
size="sm"
value={33}
/>

2
apps/docs/layouts/footer.tsx
View File

@ -19,7 +19,7 @@ export const Footer: FC<FooterProps> = ({align = "center", className}) => {
"md:items-end": align === "right",
})}
>
<p className="text-sm text-neutral-400">
<p className="text-sm text-default-400">
Created&nbsp;by&nbsp;
<Link isExternal className="text-sm" href="https://jrgarciadev.com">
Junior Garcia

10
apps/docs/layouts/navbar.tsx
View File

@ -53,7 +53,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
<Input
aria-label="Search"
classNames={{
inputWrapper: "bg-neutral-400/20 dark:bg-neutral-500/20",
inputWrapper: "bg-default-400/20 dark:bg-default-500/20",
input: "text-sm",
}}
endContent={
@ -161,13 +161,13 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
<NavbarContent className="basis-1/5 sm:basis-full" justify="end">
<NavbarItem className="hidden sm:flex gap-2">
<Link isExternal href="https://twitter.com/getnextui">
<TwitterIcon className="text-neutral-600 dark:text-neutral-500" />
<TwitterIcon className="text-default-600 dark:text-default-500" />
</Link>
<Link isExternal href="https://discord.gg/9b6yyZKmH4">
<DiscordIcon className="text-neutral-600 dark:text-neutral-500" />
<DiscordIcon className="text-default-600 dark:text-default-500" />
</Link>
<Link isExternal href="https://github.com/nextui-org/nextui">
<GithubIcon className="text-neutral-600 dark:text-neutral-500" />
<GithubIcon className="text-default-600 dark:text-default-500" />
</Link>
<ThemeSwitch />
</NavbarItem>
@ -176,7 +176,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
<Button
isExternal
as={Link}
className="group text-sm font-normal text-neutral-600 bg-neutral-400/20 dark:bg-neutral-500/20"
className="group text-sm font-normal text-default-600 bg-default-400/20 dark:bg-default-500/20"
href="https://patreon.com/jrgarciadev"
startIcon={
<HeartFilledIcon className="text-danger group-data-[hover=true]:animate-heartbeat" />

4
apps/docs/libs/docs/sponsors.ts
View File

@ -24,8 +24,8 @@ export const SPONSOR_TIER_BY_AMOUNT = {
};
export const SPONSOR_COLORS = {
[SPONSOR_TIERS.BACKER]: "neutral",
[SPONSOR_TIERS.BRONZE]: "neutral",
[SPONSOR_TIERS.BACKER]: "default",
[SPONSOR_TIERS.BRONZE]: "default",
[SPONSOR_TIERS.SILVER]: "primary",
[SPONSOR_TIERS.GOLD]: "warning",
[SPONSOR_TIERS.PLATINUM]: "secondary",

36
apps/docs/tailwind.config.js
View File

@ -221,7 +221,7 @@ module.exports = {
},
dark: {
css: {
color: "hsl(var(--nextui-neutral-700))",
color: "hsl(var(--nextui-default-700))",
strong: {
color: theme("colors.pink.500"),
},
@ -229,23 +229,23 @@ module.exports = {
},
neutral: {
css: {
"--tw-prose-body": "hsl(var(--nextui-neutral-700))",
"--tw-prose-body": "hsl(var(--nextui-default-700))",
"--tw-prose-headings": "hsl(var(--nextui-foreground))",
"--tw-prose-lead": "hsl(var(--nextui-neutral-600))",
"--tw-prose-links": "hsl(var(--nextui-neutral-900))",
"--tw-prose-bold": "hsl(var(--nextui-neutral-900))",
"--tw-prose-counters": "hsl(var(--nextui-neutral-500))",
"--tw-prose-bullets": "hsl(var(--nextui-neutral-300))",
"--tw-prose-hr": "hsl(var(--nextui-neutral-200))",
"--tw-prose-quotes": "hsl(var(--nextui-neutral-900))",
"--tw-prose-quote-borders": "hsl(var(--nextui-neutral-200))",
"--tw-prose-captions": "hsl(var(--nextui-neutral-500))",
"--tw-prose-code": "hsl(var(--nextui-neutral-900))",
"--tw-prose-pre-code": "hsl(var(--nextui-neutral-200))",
"--tw-prose-pre-bg": "hsl(var(--nextui-neutral-800))",
"--tw-prose-th-borders": "hsl(var(--nextui-neutral-300))",
"--tw-prose-td-borders": "hsl(var(--nextui-neutral-200))",
"--tw-prose-invert-body": "hsl(var(--nextui-neutral-300))",
"--tw-prose-lead": "hsl(var(--nextui-default-600))",
"--tw-prose-links": "hsl(var(--nextui-default-900))",
"--tw-prose-bold": "hsl(var(--nextui-default-900))",
"--tw-prose-counters": "hsl(var(--nextui-default-500))",
"--tw-prose-bullets": "hsl(var(--nextui-default-300))",
"--tw-prose-hr": "hsl(var(--nextui-default-200))",
"--tw-prose-quotes": "hsl(var(--nextui-default-900))",
"--tw-prose-quote-borders": "hsl(var(--nextui-default-200))",
"--tw-prose-captions": "hsl(var(--nextui-default-500))",
"--tw-prose-code": "hsl(var(--nextui-default-900))",
"--tw-prose-pre-code": "hsl(var(--nextui-default-200))",
"--tw-prose-pre-bg": "hsl(var(--nextui-default-800))",
"--tw-prose-th-borders": "hsl(var(--nextui-default-300))",
"--tw-prose-td-borders": "hsl(var(--nextui-default-200))",
"--tw-prose-invert-body": "hsl(var(--nextui-default-300))",
"--tw-prose-invert-headings": commonColors.white,
"--tw-prose-invert-lead": theme("twColors.neutral[400]"),
"--tw-prose-invert-links": commonColors.white,
@ -257,7 +257,7 @@ module.exports = {
"--tw-prose-invert-quote-borders": theme("twColors.neutral[700]"),
"--tw-prose-invert-captions": theme("twColors.neutral[400]"),
"--tw-prose-invert-code": commonColors.white,
"--tw-prose-invert-pre-code": "hsl(var(--nextui-neutral-300))",
"--tw-prose-invert-pre-code": "hsl(var(--nextui-default-300))",
"--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
"--tw-prose-invert-th-borders": theme("twColors.neutral[600]"),
"--tw-prose-invert-td-borders": theme("twColors.neutral[700]"),

15
packages/components/accordion/CHANGELOG.md
View File

@ -1,5 +1,20 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230527145118
- @nextui-org/framer-transitions@0.0.0-dev-v2-20230527145118
- @nextui-org/shared-icons@0.0.0-dev-v2-20230527145118
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/aria-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/accordion/package.json
View File

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

4
packages/components/accordion/stories/accordion.stories.tsx
View File

@ -246,7 +246,7 @@ const CustomWithClassNamesTemplate: ComponentStory<typeof Accordion> = (args: Ac
const itemStyles: AccordionItemProps["classNames"] = {
base: "py-0 w-full",
title: "font-normal text-base",
trigger: "px-2 py-0 hover:bg-neutral-100 rounded-lg h-14 flex items-center",
trigger: "px-2 py-0 hover:bg-default-100 rounded-lg h-14 flex items-center",
indicator: "text-base",
content: "text-sm px-2",
};
@ -301,7 +301,7 @@ const CustomWithClassNamesTemplate: ComponentStory<typeof Accordion> = (args: Ac
title={
<p className="flex gap-1 items-center">
Card expired
<p className="text-neutral-400 text-sm">*4812</p>
<p className="text-default-400 text-sm">*4812</p>
</p>
}
>

12
packages/components/avatar/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/use-image@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/avatar/package.json
View File

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

2
packages/components/avatar/src/use-avatar.ts
View File

@ -101,7 +101,7 @@ export function useAvatar(props: UseAvatarProps = {}) {
fallback,
alt = name,
imgRef: imgRefProp,
color = groupContext?.color ?? "neutral",
color = groupContext?.color ?? "default",
radius = groupContext?.radius ?? "full",
size = groupContext?.size ?? "md",
isBordered = groupContext?.isBordered ?? false,

2
packages/components/avatar/stories/avatar-group.stories.tsx
View File

@ -11,7 +11,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {

6
packages/components/avatar/stories/avatar.stories.tsx
View File

@ -12,7 +12,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {
@ -116,7 +116,7 @@ export const DefaultIcon = Template.bind({});
DefaultIcon.args = {
...defaultProps,
classNames: {
icon: "text-neutral-400",
icon: "text-default-400",
},
};
@ -141,7 +141,7 @@ CustomFallback.args = {
src: "https://images.unsplash.com/broken",
showFallback: true,
fallback: (
<Camera className="animate-pulse w-6 h-6 text-neutral-500" fill="currentColor" size={20} />
<Camera className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
),
};

11
packages/components/badge/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/badge/package.json
View File

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

2
packages/components/badge/stories/badge.stories.tsx
View File

@ -26,7 +26,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {

14
packages/components/button/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/spinner@0.0.0-dev-v2-20230527145118
- @nextui-org/drip@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/button/package.json
View File

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

2
packages/components/button/src/use-button-group.ts
View File

@ -43,7 +43,7 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
ref,
as,
children,
color = "neutral",
color = "default",
size = "md",
variant = "solid",
radius = "xl",

2
packages/components/button/src/use-button.ts
View File

@ -69,7 +69,7 @@ export function useButton(props: UseButtonProps) {
spinner,
fullWidth = groupContext?.fullWidth ?? false,
size = groupContext?.size ?? "md",
color = groupContext?.color ?? "neutral",
color = groupContext?.color ?? "default",
variant = groupContext?.variant ?? "solid",
disableAnimation = groupContext?.disableAnimation ?? false,
radius = groupContext?.radius ?? "xl",

2
packages/components/button/stories/button-group.stories.tsx
View File

@ -17,7 +17,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {

2
packages/components/button/stories/button.stories.tsx
View File

@ -18,7 +18,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {

13
packages/components/card/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/use-aria-button@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/drip@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/card/package.json
View File

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

8
packages/components/card/stories/card.stories.tsx
View File

@ -111,7 +111,7 @@ const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
/>
<div className="flex flex-col">
<b className="text-lg">NextUI</b>
<p className="text-neutral-500">nextui.org</p>
<p className="text-default-500">nextui.org</p>
</div>
</CardHeader>
<CardBody className="py-2">
@ -237,7 +237,7 @@ const CoverImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
className="w-full h-full object-cover"
src="https://nextui.org/images/card-example-5.jpeg"
/>
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t border-neutral-600 dark:border-neutral-100">
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t border-default-600 dark:border-default-100">
<div className="flex flex-grow gap-2 items-center">
<img
alt="Breathing app icon"
@ -259,7 +259,7 @@ const CenterImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
<Card {...args} className="max-w-fit py-4 px-0">
<CardHeader className="pb-0 pt-2 px-4 flex-col !items-start">
<p className="text-xs uppercase font-bold">Daily Mix</p>
<small className="text-neutral-500">12 Tracks</small>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-lg">Frontend Radio</h4>
</CardHeader>
<CardBody className="overflow-visible py-2">
@ -338,7 +338,7 @@ const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) =>
</CardBody>
<CardFooter className="justify-between">
<b>{item.title}</b>
<p className="text-neutral-500">{item.price}</p>
<p className="text-default-500">{item.price}</p>
</CardFooter>
</Card>
))}

11
packages/components/checkbox/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/checkbox/package.json
View File

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

6
packages/components/checkbox/stories/checkbox-group.stories.tsx
View File

@ -16,7 +16,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {
@ -164,7 +164,7 @@ export const CustomWithClassNames = () => {
value="william"
/>
</CheckboxGroup>
<p className="mt-4 ml-1 text-neutral-500">Selected: {groupSelected.join(", ")}</p>
<p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
</>
);
};
@ -188,7 +188,7 @@ export const CustomWithHooks = () => {
<CheckboxItemWithHooks value="pool">Pool</CheckboxItemWithHooks>
<CheckboxItemWithHooks value="gym">Gym</CheckboxItemWithHooks>
</CheckboxGroup>
<p className="mt-4 ml-1 text-neutral-500">Selected: {groupSelected.join(", ")}</p>
<p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
</>
);
};

8
packages/components/checkbox/stories/checkbox.stories.tsx
View File

@ -23,7 +23,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {
@ -71,7 +71,7 @@ const ControlledTemplate: ComponentStory<typeof Checkbox> = (args: CheckboxProps
<Checkbox isSelected={selected} onValueChange={setSelected} {...args}>
Subscribe (controlled)
</Checkbox>
<p className="text-neutral-500">Selected: {selected ? "true" : "false"}</p>
<p className="text-default-500">Selected: {selected ? "true" : "false"}</p>
</div>
);
};
@ -203,7 +203,7 @@ export const CustomWithClassNames = (props: CustomCheckboxProps) => {
name={userName}
/>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-neutral-500">{userRole}</span>
<span className="text-xs text-default-500">{userRole}</span>
<Chip color={statusColor} size="xs" variant="flat">
{status}
</Chip>
@ -233,7 +233,7 @@ export const CustomWithHooks = (props: CheckboxProps) => {
</VisuallyHidden>
<Chip
classNames={{
base: clsx("border-neutral hover:bg-neutral-200", {
base: clsx("border-default hover:bg-default-200", {
"border-primary bg-primary hover:bg-primary-600 hover:border-primary-600": isSelected,
"outline-none ring-2 !ring-primary ring-offset-2 ring-offset-background dark:ring-offset-background-dark": isFocusVisible,
}),

12
packages/components/chip/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230527145118
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/chip/package.json
View File

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

2
packages/components/chip/stories/chip.stories.tsx
View File

@ -19,7 +19,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {

11
packages/components/code/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/code/package.json
View File

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

2
packages/components/code/stories/code.stories.tsx
View File

@ -11,7 +11,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {

11
packages/components/divider/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/divider
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/divider/package.json
View File

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

2
packages/components/divider/stories/divider.stories.tsx
View File

@ -32,7 +32,7 @@ const Template: ComponentStory<typeof Divider> = (args: DividerProps) => (
<div className="max-w-md">
<div className="space-y-1">
<h4 className="text-base font-medium">NextUI Components</h4>
<p className="text-sm text-neutral-400">Beautiful, fast and modern React UI library.</p>
<p className="text-sm 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">

11
packages/components/drip/CHANGELOG.md
View File

@ -1,5 +1,16 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/drip/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/drip",
"version": "0.0.0-dev-v2-20230527131721",
"version": "0.0.0-dev-v2-20230527145118",
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
"keywords": [
"drip"

14
packages/components/dropdown/CHANGELOG.md
View File

@ -1,5 +1,19 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/aria-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/use-is-mobile@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/popover@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/dropdown/package.json
View File

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

2
packages/components/dropdown/src/use-dropdown.ts
View File

@ -103,7 +103,7 @@ export function useDropdown(props: UseDropdownProps) {
...classNamesProp,
...props.classNames,
base: clsx(classNames, classNamesProp?.base, props.className),
arrow: clsx("border border-neutral-100", classNamesProp?.arrow),
arrow: clsx("border border-default-100", classNamesProp?.arrow),
},
});

4
packages/components/dropdown/stories/dropdown.stories.tsx
View File

@ -35,7 +35,7 @@ export default {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
},
radius: {
@ -338,7 +338,7 @@ const WithEndContentTemplate: ComponentStory<any> = ({
disableAnimation,
...args
}) => {
const iconClasses = "text-2xl text-neutral-500 pointer-events-none flex-shrink-0";
const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
return (
<Dropdown {...args} disableAnimation={disableAnimation}>

12
packages/components/image/CHANGELOG.md
View File

@ -1,5 +1,17 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/use-image@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

2
packages/components/image/package.json
View File

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

13
packages/components/input/CHANGELOG.md
View File

@ -1,5 +1,18 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230527145118
### Patch Changes
- Neutral color renamed to Default
- Updated dependencies
- @nextui-org/shared-icons@0.0.0-dev-v2-20230527145118
- @nextui-org/shared-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/use-aria-field@0.0.0-dev-v2-20230527145118
- @nextui-org/dom-utils@0.0.0-dev-v2-20230527145118
- @nextui-org/system@0.0.0-dev-v2-20230527145118
- @nextui-org/theme@0.0.0-dev-v2-20230527145118
## 0.0.0-dev-v2-20230527131721
### Patch Changes

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