diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx index 6acdf53c31..8d4f61cbf1 100644 --- a/apps/docs/components/docs/components/codeblock.tsx +++ b/apps/docs/components/docs/components/codeblock.tsx @@ -188,9 +188,11 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>( style={{ ...props.style, ...(highlightStyleToken.some((t) => { + const content = token.content.trim(); + const regex = t instanceof RegExp ? t : new RegExp(t); - return regex.test(token.content.trim()); + return regex.test(content); }) ? {color: "rgb(var(--code-function))"} : {}), diff --git a/apps/docs/components/docs/components/import-tabs.tsx b/apps/docs/components/docs/components/import-tabs.tsx index 251f35fc48..796ac45dc6 100644 --- a/apps/docs/components/docs/components/import-tabs.tsx +++ b/apps/docs/components/docs/components/import-tabs.tsx @@ -8,14 +8,14 @@ type PackageManager = { }; const importTabs: PackageManager[] = [ - { - key: "main", - name: "Main", - }, { key: "individual", name: "Individual", }, + { + key: "main", + name: "Global", + }, ]; export interface ImportTabsProps { diff --git a/apps/docs/components/docs/components/package-managers.tsx b/apps/docs/components/docs/components/package-managers.tsx index 47d5ffa136..0c4920a230 100644 --- a/apps/docs/components/docs/components/package-managers.tsx +++ b/apps/docs/components/docs/components/package-managers.tsx @@ -1,7 +1,8 @@ -import {Tabs, Tab, Snippet} from "@nextui-org/react"; +import {Tabs, Tab, Snippet, Code} from "@nextui-org/react"; import {Key, useState} from "react"; import Codeblock from "./codeblock"; +import {Blockquote} from "./blockquote"; import {YarnIcon, NpmSmallIcon, PnpmIcon, BunIcon, CLIBoldIcon} from "@/components/icons"; @@ -9,8 +10,8 @@ type PackageManagerName = "cli" | "npm" | "yarn" | "pnpm" | "bun"; type PackageManager = { icon: JSX.Element; - label?: string; name: PackageManagerName; + label?: string; }; const packageManagers: PackageManager[] = [ @@ -39,9 +40,13 @@ const packageManagers: PackageManager[] = [ export interface PackageManagersProps { commands: Partial<Record<PackageManagerName, React.Key>>; + showGlobalInstallWarning?: boolean; } -export const PackageManagers = ({commands}: PackageManagersProps) => { +export const PackageManagers = ({ + commands, + showGlobalInstallWarning = false, +}: PackageManagersProps) => { const [selectedManager, setSelectedManager] = useState<PackageManagerName>( commands.cli ? "cli" : "npm", ); @@ -51,44 +56,52 @@ export const PackageManagers = ({commands}: PackageManagersProps) => { }; return ( - <Tabs - aria-label="NextUI installation commands" - classNames={{ - base: "group mt-4 min-w-[300px] w-full overflow-x-auto", - tabList: "h-10", - }} - selectedKey={selectedManager} - variant="underlined" - onSelectionChange={handleSelectionChange} - > - {packageManagers.map(({name, label, icon}) => { - if (!commands[name]) return null; + <> + <Tabs + aria-label="NextUI installation commands" + classNames={{ + base: "group mt-4 min-w-[300px] w-full overflow-x-auto", + tabList: "h-10", + }} + selectedKey={selectedManager} + variant="underlined" + onSelectionChange={handleSelectionChange} + > + {packageManagers.map(({name, label, icon}) => { + if (!commands[name]) return null; - return ( - <Tab - key={name} - title={ - <div className="flex items-center space-x-2"> - {icon} - <span>{label || name}</span> - </div> - } - > - <Snippet - disableTooltip - fullWidth - hideSymbol - classNames={{ - base: "bg-code-background text-code-foreground", - pre: "font-light text-base", - copyButton: "text-lg text-zinc-500 mr-2", - }} + return ( + <Tab + key={name} + title={ + <div className="flex items-center space-x-2"> + {icon} + <span>{label || name}</span> + </div> + } > - <Codeblock removeIndent codeString={commands[name] as string} language="bash" /> - </Snippet> - </Tab> - ); - })} - </Tabs> + <Snippet + disableTooltip + fullWidth + hideSymbol + classNames={{ + base: "bg-code-background text-code-foreground", + pre: "font-light text-base", + copyButton: "text-lg text-zinc-500 mr-2", + }} + > + <Codeblock removeIndent codeString={commands[name] as string} language="bash" /> + </Snippet> + </Tab> + ); + })} + </Tabs> + {showGlobalInstallWarning && ( + <Blockquote className="my-2"> + No need to install this package if <Code>@nextui-org/react</Code> is already installed + globally. + </Blockquote> + )} + </> ); }; diff --git a/apps/docs/content/components/card/blurred-footer.ts b/apps/docs/content/components/card/blurred-footer.ts index a0472807b7..ba3e83bd87 100644 --- a/apps/docs/content/components/card/blurred-footer.ts +++ b/apps/docs/content/components/card/blurred-footer.ts @@ -11,7 +11,7 @@ export default function App() { alt="Woman listing to music" className="object-cover" height={200} - src="/images/hero-card.jpeg" + src="https://nextui.org/images/hero-card.jpeg" width={200} /> <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10"> diff --git a/apps/docs/content/components/card/blurred.ts b/apps/docs/content/components/card/blurred.ts index 063702b5d5..8ba66a5acc 100644 --- a/apps/docs/content/components/card/blurred.ts +++ b/apps/docs/content/components/card/blurred.ts @@ -165,7 +165,7 @@ export default function App() { className="object-cover" height={200} shadow="md" - src="/images/album-cover.png" + src="https://nextui.org/images/album-cover.png" width="100%" /> </div> diff --git a/apps/docs/content/components/card/composition.ts b/apps/docs/content/components/card/composition.ts index d211611138..821d5a8bf8 100644 --- a/apps/docs/content/components/card/composition.ts +++ b/apps/docs/content/components/card/composition.ts @@ -7,7 +7,7 @@ export default function App() { <Card className="max-w-[340px]"> <CardHeader className="justify-between"> <div className="flex gap-5"> - <Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" /> + <Avatar isBordered radius="full" size="md" src="https://nextui.org/avatars/avatar-1.png" /> <div className="flex flex-col gap-1 items-start justify-center"> <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> diff --git a/apps/docs/content/components/card/cover-image.ts b/apps/docs/content/components/card/cover-image.ts index 93a01e67fd..795f955142 100644 --- a/apps/docs/content/components/card/cover-image.ts +++ b/apps/docs/content/components/card/cover-image.ts @@ -12,7 +12,7 @@ export default function App() { removeWrapper alt="Card background" className="z-0 w-full h-full object-cover" - src="/images/card-example-4.jpeg" + src="https://nextui.org/images/card-example-4.jpeg" /> </Card> <Card className="col-span-12 sm:col-span-4 h-[300px]"> @@ -24,7 +24,7 @@ export default function App() { removeWrapper alt="Card background" className="z-0 w-full h-full object-cover" - src="/images/card-example-3.jpeg" + src="https://nextui.org/images/card-example-3.jpeg" /> </Card> <Card className="col-span-12 sm:col-span-4 h-[300px]"> @@ -36,7 +36,7 @@ export default function App() { removeWrapper alt="Card background" className="z-0 w-full h-full object-cover" - src="/images/card-example-2.jpeg" + src="https://nextui.org/images/card-example-2.jpeg" /> </Card> <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5"> @@ -48,7 +48,7 @@ export default function App() { removeWrapper alt="Card example background" className="z-0 w-full h-full scale-125 -translate-y-6 object-cover" - src="/images/card-example-6.jpeg" + src="https://nextui.org/images/card-example-6.jpeg" /> <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between"> <div> @@ -69,14 +69,14 @@ export default function App() { removeWrapper alt="Relaxing app background" className="z-0 w-full h-full object-cover" - src="/images/card-example-5.jpeg" + src="https://nextui.org/images/card-example-5.jpeg" /> <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"> <Image alt="Breathing app icon" className="rounded-full w-10 h-11 bg-black" - src="/images/breathing-app-icon.jpeg" + src="https://nextui.org/images/breathing-app-icon.jpeg" /> <div className="flex flex-col"> <p className="text-tiny text-white/60">Breathing App</p> diff --git a/apps/docs/content/components/card/image.ts b/apps/docs/content/components/card/image.ts index 90b87ab5ac..08e2d16c15 100644 --- a/apps/docs/content/components/card/image.ts +++ b/apps/docs/content/components/card/image.ts @@ -12,7 +12,7 @@ export default function App() { <Image alt="Card background" className="object-cover rounded-xl" - src="/images/hero-card-complete.jpeg" + src="https://nextui.org/images/hero-card-complete.jpeg" width={270} /> </CardBody> diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx index e3e63c79f2..0b95f6e804 100644 --- a/apps/docs/content/docs/components/accordion.mdx +++ b/apps/docs/content/docs/components/accordion.mdx @@ -18,6 +18,7 @@ Accordion display a list of high-level options that can expand/collapse to revea ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add accordion", npm: "npm install @nextui-org/accordion", diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx index 290e2b3a60..a483949b2b 100644 --- a/apps/docs/content/docs/components/autocomplete.mdx +++ b/apps/docs/content/docs/components/autocomplete.mdx @@ -18,6 +18,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add autocomplete", npm: "npm install @nextui-org/autocomplete", @@ -209,6 +210,7 @@ The following example shows how you would create a controlled `Autocomplete`, co We recommend using the `useFilter` hook from [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useFilter.html#usefilter) to manage the filtering of the items. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @react-aria/i18n", yarn: "yarn add @react-aria/i18n", @@ -257,6 +259,7 @@ Autocomplete supports asynchronous filtering, in the example below we are using from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @react-stately/data", yarn: "yarn add @react-stately/data", @@ -285,6 +288,7 @@ Autocomplete supports asynchronous loading, in the example below we are using a The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @nextui-org/use-infinite-scroll", yarn: "yarn add @nextui-org/use-infinite-scroll", diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx index 715d0e9d45..7e991614bf 100644 --- a/apps/docs/content/docs/components/avatar.mdx +++ b/apps/docs/content/docs/components/avatar.mdx @@ -19,6 +19,7 @@ The Avatar component is used to represent a user, and displays the profile pictu ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add avatar", npm: "npm install @nextui-org/avatar", diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx index 5c4f6f300e..3d5a0e6a69 100644 --- a/apps/docs/content/docs/components/badge.mdx +++ b/apps/docs/content/docs/components/badge.mdx @@ -18,6 +18,7 @@ Badges are used as a small numerical value or status descriptor for UI elements. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add badge", npm: "npm install @nextui-org/badge", diff --git a/apps/docs/content/docs/components/breadcrumbs.mdx b/apps/docs/content/docs/components/breadcrumbs.mdx index 16578c09b5..702be87cba 100644 --- a/apps/docs/content/docs/components/breadcrumbs.mdx +++ b/apps/docs/content/docs/components/breadcrumbs.mdx @@ -18,6 +18,7 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add breadcrumbs", npm: "npm install @nextui-org/breadcrumbs", diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx index a8adab6004..ada09219d3 100644 --- a/apps/docs/content/docs/components/button.mdx +++ b/apps/docs/content/docs/components/button.mdx @@ -18,6 +18,7 @@ Buttons allow users to perform actions and choose with a single tap. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add button", npm: "npm install @nextui-org/button", diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx index 2de2f607fe..d2117ad959 100644 --- a/apps/docs/content/docs/components/calendar.mdx +++ b/apps/docs/content/docs/components/calendar.mdx @@ -18,6 +18,7 @@ A calendar consists of a grouping element containing one or more date grids (e.g ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add calendar", npm: "npm install @nextui-org/calendar", diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx index 5fbfcefa7c..e84f9428ed 100644 --- a/apps/docs/content/docs/components/card.mdx +++ b/apps/docs/content/docs/components/card.mdx @@ -18,6 +18,7 @@ Card is a container for text, photos, and actions in the context of a single sub ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add card", npm: "npm install @nextui-org/card", diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx index ff5bddf731..5ef571288a 100644 --- a/apps/docs/content/docs/components/checkbox-group.mdx +++ b/apps/docs/content/docs/components/checkbox-group.mdx @@ -18,6 +18,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add checkbox", npm: "npm install @nextui-org/checkbox", diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx index ba56b2d0af..b65b7a6280 100644 --- a/apps/docs/content/docs/components/checkbox.mdx +++ b/apps/docs/content/docs/components/checkbox.mdx @@ -18,6 +18,7 @@ Checkboxes allow users to select multiple items from a list of individual items, ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add checkbox", npm: "npm install @nextui-org/checkbox", diff --git a/apps/docs/content/docs/components/chip.mdx b/apps/docs/content/docs/components/chip.mdx index f7f258d143..8d62063a07 100644 --- a/apps/docs/content/docs/components/chip.mdx +++ b/apps/docs/content/docs/components/chip.mdx @@ -18,6 +18,7 @@ A Chip is a small block of essential information that represent an input, attrib ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add chip", npm: "npm install @nextui-org/chip", diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx index c0eca8fa43..c3f7d6d175 100644 --- a/apps/docs/content/docs/components/circular-progress.mdx +++ b/apps/docs/content/docs/components/circular-progress.mdx @@ -18,6 +18,7 @@ Circular progress indicators are utilized to indicate an undetermined wait perio ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add progress", npm: "npm install @nextui-org/progress", diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx index fad01547d7..2b22d9f6fe 100644 --- a/apps/docs/content/docs/components/code.mdx +++ b/apps/docs/content/docs/components/code.mdx @@ -18,6 +18,7 @@ Code is a component used to display inline code. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add code", npm: "npm install @nextui-org/code", diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx index 6276cb2094..515bf812a2 100644 --- a/apps/docs/content/docs/components/date-input.mdx +++ b/apps/docs/content/docs/components/date-input.mdx @@ -19,6 +19,7 @@ Each part of a date value is displayed in an individually editable segment. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add date-input", npm: "npm install @nextui-org/date-input", @@ -98,6 +99,7 @@ and time zone concerns such as daylight saving time are taken into account when in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -123,6 +125,7 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -147,6 +150,7 @@ The minValue and maxValue props can also be used to ensure the value is within a in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -171,6 +175,7 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -194,6 +199,7 @@ However, if this is displayed elsewhere or implicit based on the usecase, it can in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -217,6 +223,7 @@ This example forces DateInput to use 24-hour time, regardless of the locale. in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index 47862b7826..c3936cc3f9 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -18,6 +18,7 @@ DatePickers combine a DateInput and a Calendar popover to allow users to enter o ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add date-picker", npm: "npm install @nextui-org/date-picker", @@ -105,6 +106,7 @@ and time zone concerns such as daylight saving time are taken into account when in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -130,6 +132,7 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -154,6 +157,7 @@ The minValue and maxValue props can also be used to ensure the value is within a in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -178,6 +182,7 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -200,6 +205,7 @@ DatePicker supports marking certain dates as unavailable. These dates cannot be in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -232,6 +238,7 @@ By default, when pressing the next or previous buttons, pagination will advance in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index fe73390510..3d0a576e3f 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -18,6 +18,7 @@ Date Range Picker combines two DateInputs and a RangeCalendar popover to allow u ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add date-picker", npm: "npm install @nextui-org/date-picker", @@ -118,6 +119,7 @@ and time zone concerns such as daylight saving time are taken into account when in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -143,6 +145,7 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -167,6 +170,7 @@ The minValue and maxValue props can also be used to ensure the value is within a in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date", yarn: "yarn add @internationalized/date", @@ -191,6 +195,7 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -213,6 +218,7 @@ DateRangePicker supports marking certain dates as unavailable. These dates canno in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -238,6 +244,7 @@ It is up to applications to split the full selected range into multiple as neede in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", @@ -258,6 +265,7 @@ import {useLocale} from "@react-aria/i18n"; in multiple formats into `ZonedDateTime` objects. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @internationalized/date @react-aria/i18n", yarn: "yarn add @internationalized/date @react-aria/i18n", diff --git a/apps/docs/content/docs/components/divider.mdx b/apps/docs/content/docs/components/divider.mdx index 464b00af44..9aed017e81 100644 --- a/apps/docs/content/docs/components/divider.mdx +++ b/apps/docs/content/docs/components/divider.mdx @@ -18,6 +18,7 @@ Divider is a component that separates content in a page. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add divider", npm: "npm install @nextui-org/divider", diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx index 9003494129..f8d93d37c8 100644 --- a/apps/docs/content/docs/components/dropdown.mdx +++ b/apps/docs/content/docs/components/dropdown.mdx @@ -18,6 +18,7 @@ Displays a list of actions or options that a user can choose. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add dropdown", npm: "npm install @nextui-org/dropdown", diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx index 17b10281e2..518fd874af 100644 --- a/apps/docs/content/docs/components/image.mdx +++ b/apps/docs/content/docs/components/image.mdx @@ -18,6 +18,7 @@ The Image component is used to display images with support for fallback. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add image", npm: "npm install @nextui-org/image", diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx index b3d28f7ecb..f519bf42c1 100644 --- a/apps/docs/content/docs/components/input.mdx +++ b/apps/docs/content/docs/components/input.mdx @@ -18,6 +18,7 @@ Input is a component that allows users to enter text. It can be used to get user ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add input", npm: "npm install @nextui-org/input", diff --git a/apps/docs/content/docs/components/kbd.mdx b/apps/docs/content/docs/components/kbd.mdx index 9495f077a4..3e5eeed4dd 100644 --- a/apps/docs/content/docs/components/kbd.mdx +++ b/apps/docs/content/docs/components/kbd.mdx @@ -18,6 +18,7 @@ Keyboard key is a component to display which key or combination of keys performs ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add kbd", npm: "npm install @nextui-org/kbd", diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx index 6dd25e7cb4..ce10d3d5bb 100644 --- a/apps/docs/content/docs/components/link.mdx +++ b/apps/docs/content/docs/components/link.mdx @@ -18,6 +18,7 @@ Links allow users to click their way from page to page. This component is styled ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add link", npm: "npm install @nextui-org/link", diff --git a/apps/docs/content/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx index 52960c6bbd..5211345ea7 100644 --- a/apps/docs/content/docs/components/listbox.mdx +++ b/apps/docs/content/docs/components/listbox.mdx @@ -18,6 +18,7 @@ A listbox displays a list of options and allows a user to select one or more of ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add listbox", npm: "npm install @nextui-org/listbox", diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx index e7d2c86b29..0e47fea664 100644 --- a/apps/docs/content/docs/components/modal.mdx +++ b/apps/docs/content/docs/components/modal.mdx @@ -18,6 +18,7 @@ Displays a dialog with a custom content that requires attention or provides addi ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add modal", npm: "npm install @nextui-org/modal", diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx index 7997c68278..91dc1ce29a 100644 --- a/apps/docs/content/docs/components/navbar.mdx +++ b/apps/docs/content/docs/components/navbar.mdx @@ -18,6 +18,7 @@ A responsive navigation header positioned on top side of your page that includes ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add navbar", npm: "npm install @nextui-org/navbar", diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx index e1524a2dac..f6fa8b48c7 100644 --- a/apps/docs/content/docs/components/pagination.mdx +++ b/apps/docs/content/docs/components/pagination.mdx @@ -18,6 +18,7 @@ The Pagination component allows you to display active page and navigate between ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add pagination", npm: "npm install @nextui-org/pagination", diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx index 447ce4684e..fe5aeb3026 100644 --- a/apps/docs/content/docs/components/popover.mdx +++ b/apps/docs/content/docs/components/popover.mdx @@ -19,6 +19,7 @@ additional rich content on top of something. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add popover", npm: "npm install @nextui-org/popover", diff --git a/apps/docs/content/docs/components/progress.mdx b/apps/docs/content/docs/components/progress.mdx index 2de6bea2e8..4873bdcaf1 100644 --- a/apps/docs/content/docs/components/progress.mdx +++ b/apps/docs/content/docs/components/progress.mdx @@ -18,6 +18,7 @@ The Progress component allows you to view the progress of any activity. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add progress", npm: "npm install @nextui-org/progress", diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx index a0578360a6..f5df923519 100644 --- a/apps/docs/content/docs/components/radio-group.mdx +++ b/apps/docs/content/docs/components/radio-group.mdx @@ -18,6 +18,7 @@ Radio Group allow users to select a single option from a list of mutually exclus ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add radio", npm: "npm install @nextui-org/radio", diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 8349f85a50..4bbba55128 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -18,6 +18,7 @@ A range calendar consists of a grouping element containing one or more date grid ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add calendar", npm: "npm install @nextui-org/calendar", diff --git a/apps/docs/content/docs/components/scroll-shadow.mdx b/apps/docs/content/docs/components/scroll-shadow.mdx index 61e5b1844a..a04eabfb7e 100644 --- a/apps/docs/content/docs/components/scroll-shadow.mdx +++ b/apps/docs/content/docs/components/scroll-shadow.mdx @@ -18,6 +18,7 @@ Applies top and bottom shadows when content overflows on scroll. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add scroll-shadow", npm: "npm install @nextui-org/scroll-shadow", diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index 2537767965..4bcd6a25da 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -18,6 +18,7 @@ A select displays a collapsible list of options and allows a user to select one ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add select", npm: "npm install @nextui-org/select", @@ -187,6 +188,7 @@ Select supports asynchronous loading, in the example below we are using a custom The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @nextui-org/use-infinite-scroll", yarn: "yarn add @nextui-org/use-infinite-scroll", diff --git a/apps/docs/content/docs/components/skeleton.mdx b/apps/docs/content/docs/components/skeleton.mdx index dbf755a63f..f1bb8ef206 100644 --- a/apps/docs/content/docs/components/skeleton.mdx +++ b/apps/docs/content/docs/components/skeleton.mdx @@ -18,6 +18,7 @@ Skeleton is a placeholder to show a loading state and the expected shape of a co ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add skeleton", npm: "npm install @nextui-org/skeleton", diff --git a/apps/docs/content/docs/components/slider.mdx b/apps/docs/content/docs/components/slider.mdx index b6b5c89fe8..9b5f471726 100644 --- a/apps/docs/content/docs/components/slider.mdx +++ b/apps/docs/content/docs/components/slider.mdx @@ -18,6 +18,7 @@ A slider allows a user to select one or more values within a range. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add slider", npm: "npm install @nextui-org/slider", diff --git a/apps/docs/content/docs/components/snippet.mdx b/apps/docs/content/docs/components/snippet.mdx index ea155045db..c3661a6466 100644 --- a/apps/docs/content/docs/components/snippet.mdx +++ b/apps/docs/content/docs/components/snippet.mdx @@ -18,6 +18,7 @@ Snippet is a component that can be used to display inline or multiline code snip ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add snippet", npm: "npm install @nextui-org/snippet", diff --git a/apps/docs/content/docs/components/spacer.mdx b/apps/docs/content/docs/components/spacer.mdx index 80bc4eee9d..204c145381 100644 --- a/apps/docs/content/docs/components/spacer.mdx +++ b/apps/docs/content/docs/components/spacer.mdx @@ -18,6 +18,7 @@ Spacer is a component used to add space between components. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add spacer", npm: "npm install @nextui-org/spacer", diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx index 93941f9999..cba84e7ce0 100644 --- a/apps/docs/content/docs/components/spinner.mdx +++ b/apps/docs/content/docs/components/spinner.mdx @@ -18,6 +18,7 @@ Spinner express an unspecified wait time or display the length of a process. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add spinner", npm: "npm install @nextui-org/spinner", diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx index 1ea96d526c..9b199c32ff 100644 --- a/apps/docs/content/docs/components/switch.mdx +++ b/apps/docs/content/docs/components/switch.mdx @@ -18,6 +18,7 @@ The Switch component is used as an alternative between checked and not checked s ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add switch", npm: "npm install @nextui-org/switch", diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx index c339a19d88..60252e8d5a 100644 --- a/apps/docs/content/docs/components/table.mdx +++ b/apps/docs/content/docs/components/table.mdx @@ -18,6 +18,7 @@ Tables are used to display tabular data using rows and columns. They allow users ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add table", npm: "npm install @nextui-org/table", @@ -218,6 +219,7 @@ We recommend using the `useAsyncList` hook from [@react-stately/data](https://re sure to install it before using the sorting feature. <PackageManagers + showGlobalInstallWarning commands={{ npm: "npm install @react-stately/data", yarn: "yarn add @react-stately/data", diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx index e47fbb4afb..63718e7358 100644 --- a/apps/docs/content/docs/components/tabs.mdx +++ b/apps/docs/content/docs/components/tabs.mdx @@ -18,6 +18,7 @@ Tabs organize content into multiple sections and allow users to navigate between ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add tabs", npm: "npm install @nextui-org/tabs", diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx index 96f2f7c113..9fe3cafadd 100644 --- a/apps/docs/content/docs/components/textarea.mdx +++ b/apps/docs/content/docs/components/textarea.mdx @@ -18,6 +18,7 @@ Textarea component is a multi-line Input which allows you to write large texts. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add input", npm: "npm install @nextui-org/input", diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx index e973d72797..a8859ce390 100644 --- a/apps/docs/content/docs/components/time-input.mdx +++ b/apps/docs/content/docs/components/time-input.mdx @@ -18,6 +18,7 @@ The `TimeInput` component consists of a label, and a group of segments represent ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add date-input", npm: "npm install @nextui-org/date-input", diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx index d9723e5730..022760e6ec 100644 --- a/apps/docs/content/docs/components/tooltip.mdx +++ b/apps/docs/content/docs/components/tooltip.mdx @@ -18,6 +18,7 @@ Tooltips display a brief, informative message that appears when a user interacts ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add tooltip", npm: "npm install @nextui-org/tooltip", diff --git a/apps/docs/content/docs/components/user.mdx b/apps/docs/content/docs/components/user.mdx index e334f792a8..7759abe1bc 100644 --- a/apps/docs/content/docs/components/user.mdx +++ b/apps/docs/content/docs/components/user.mdx @@ -18,6 +18,7 @@ Display user information with avatar and name. ## Installation <PackageManagers + showGlobalInstallWarning commands={{ cli: "nextui add user", npm: "npm install @nextui-org/user", diff --git a/apps/docs/content/docs/guide/introduction.mdx b/apps/docs/content/docs/guide/introduction.mdx index 5e92213bc1..19b1ca2024 100644 --- a/apps/docs/content/docs/guide/introduction.mdx +++ b/apps/docs/content/docs/guide/introduction.mdx @@ -9,7 +9,7 @@ Welcome to the NextUI documentation! <NextImage priority - src="/nextui-banner.png" + src="https://nextui.org/nextui-banner.png" quality={100} width={700} height={350} diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx index 15e7f29fb8..39baba856f 100644 --- a/apps/docs/content/landing/index.tsx +++ b/apps/docs/content/landing/index.tsx @@ -335,7 +335,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) => }} height={200} shadow="lg" - src="/images/album-cover.png" + src="https://nextui.org/images/album-cover.png" width="100%" /> </div>