diff --git a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx index f7966ac9e7..abc21040a8 100644 --- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx @@ -1,24 +1,16 @@ import Link from "next/link" import { notFound } from "next/navigation" import { mdxComponents } from "@/mdx-components" -import { - IconArrowLeft, - IconArrowRight, - IconArrowUpRight, -} from "@tabler/icons-react" -import fm from "front-matter" +import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react" import { findNeighbour } from "fumadocs-core/page-tree" -import z from "zod" import { source } from "@/lib/source" import { absoluteUrl } from "@/lib/utils" import { DocsBaseSwitcher } from "@/components/docs-base-switcher" -import { DocsPageLinks } from "@/components/docs-page-links" +import { DocsCopyPage } from "@/components/docs-copy-page" import { DocsTableOfContents } from "@/components/docs-toc" import { OpenInV0Cta } from "@/components/open-in-v0-cta" -import { Badge } from "@/registry/new-york-v4/ui/badge" import { Button } from "@/registry/new-york-v4/ui/button" -import { Separator } from "@/registry/new-york-v4/ui/separator" export const revalidate = false export const dynamic = "force-static" @@ -88,19 +80,7 @@ export default async function Page(props: { const doc = page.data const MDX = doc.body const neighbours = findNeighbour(source.pageTree, page.url) - const raw = await page.data.getText("raw") - const { attributes } = fm(raw) - const { links } = z - .object({ - links: z - .object({ - doc: z.string().optional(), - api: z.string().optional(), - }) - .optional(), - }) - .parse(attributes) return (
-
-
+
+
@@ -117,97 +97,82 @@ export default async function Page(props: { {doc.title}
- {params.slug && - params.slug[0] === "components" && - params.slug[1] && - params.slug[2] && ( - + +
+ {neighbours.previous && ( + )} - {neighbours.previous && ( - - )} - {neighbours.next && ( - - )} + {neighbours.next && ( + + )} +
{doc.description && ( -

+

{doc.description}

)}
- {links ? ( -
- {links?.doc && ( - - - Docs - - - )} - {links?.api && ( - - - API Reference - - - )} -
- ) : null}
-
+
+ {params.slug && + params.slug[0] === "components" && + params.slug[1] && + params.slug[2] && ( + + )}
-
-
- {neighbours.previous && ( - - )} - {neighbours.next && ( - - )} +
+ {neighbours.previous && ( + + )} + {neighbours.next && ( + + )} +
@@ -218,7 +183,6 @@ export default async function Page(props: {
) : null}
-
diff --git a/apps/v4/app/(app)/docs/layout.tsx b/apps/v4/app/(app)/docs/layout.tsx index 65e202a987..339c2ca804 100644 --- a/apps/v4/app/(app)/docs/layout.tsx +++ b/apps/v4/app/(app)/docs/layout.tsx @@ -9,7 +9,10 @@ export default function DocsLayout({ }) { return (
- +
{children}
 diff --git a/apps/v4/app/(app)/llm/[[...slug]]/route.ts b/apps/v4/app/(app)/llm/[[...slug]]/route.ts index b50339de4d..1bc44d4779 100644 --- a/apps/v4/app/(app)/llm/[[...slug]]/route.ts +++ b/apps/v4/app/(app)/llm/[[...slug]]/route.ts @@ -7,6 +7,19 @@ import { getActiveStyle } from "@/registry/_legacy-styles" export const revalidate = false +function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: string) { + // Detect base from URL: /docs/components/base/... or /docs/components/radix/... + if (slug && slug[0] === "components" && slug[1]) { + if (slug[1] === "base") { + return "base-nova" + } + if (slug[1] === "radix") { + return "new-york-v4" + } + } + return fallbackStyle +} + export async function GET( _req: NextRequest, { params }: { params: Promise<{ slug?: string[] }> } @@ -19,9 +32,11 @@ export async function GET( notFound() } + const effectiveStyle = getStyleFromSlug(slug, activeStyle.name) + const processedContent = processMdxForLLMs( await page.data.getText("raw"), - activeStyle.name + effectiveStyle ) return new NextResponse(processedContent, { diff --git a/apps/v4/components/code-tabs.tsx b/apps/v4/components/code-tabs.tsx index 98c48bf768..e6b9289589 100644 --- a/apps/v4/components/code-tabs.tsx +++ b/apps/v4/components/code-tabs.tsx @@ -18,7 +18,7 @@ export function CodeTabs({ children }: React.ComponentProps) { onValueChange={(value) => setConfig({ ...config, installationType: value as "cli" | "manual" }) } - className="relative mt-6 w-full" + className="relative mt-6 w-full *:data-[slot=tabs-list]:gap-6" > {children} diff --git a/apps/v4/components/component-preview-tabs.tsx b/apps/v4/components/component-preview-tabs.tsx index 5ac2ae2c54..423d3ec32a 100644 --- a/apps/v4/components/component-preview-tabs.tsx +++ b/apps/v4/components/component-preview-tabs.tsx @@ -6,6 +6,7 @@ import { cn } from "@/lib/utils" export function ComponentPreviewTabs({ className, + previewClassName, align = "center", hideCode = false, chromeLessOnMobile = false, @@ -13,6 +14,7 @@ export function ComponentPreviewTabs({ source, ...props }: React.ComponentProps<"div"> & { + previewClassName?: string align?: "center" | "start" | "end" hideCode?: boolean chromeLessOnMobile?: boolean @@ -22,7 +24,7 @@ export function ComponentPreviewTabs({ return (
{component} diff --git a/apps/v4/components/component-preview.tsx b/apps/v4/components/component-preview.tsx index 4499d9727d..8c62dbae96 100644 --- a/apps/v4/components/component-preview.tsx +++ b/apps/v4/components/component-preview.tsx @@ -5,33 +5,15 @@ import { getRegistryComponent } from "@/lib/registry" import { ComponentPreviewTabs } from "@/components/component-preview-tabs" import { ComponentSource } from "@/components/component-source" -function DynamicComponent({ - name, - styleName, -}: { - name: string - styleName: string -}) { - const Component = React.useMemo( - () => getRegistryComponent(name, styleName), - [name, styleName] - ) - - if (!Component) { - return null - } - - return React.createElement(Component) -} - export function ComponentPreview({ name, - styleName = "new-york-v4", type, className, + previewClassName, align = "center", hideCode = false, chromeLessOnMobile = false, + styleName = "base-nova", ...props }: React.ComponentProps<"div"> & { name: string @@ -41,6 +23,7 @@ export function ComponentPreview({ hideCode?: boolean type?: "block" | "component" | "example" chromeLessOnMobile?: boolean + previewClassName?: string }) { const Component = getRegistryComponent(name, styleName) @@ -83,6 +66,7 @@ export function ComponentPreview({ return ( } @@ -98,3 +82,22 @@ export function ComponentPreview({ /> ) } + +function DynamicComponent({ + name, + styleName, +}: { + name: string + styleName: string +}) { + const Component = React.useMemo( + () => getRegistryComponent(name, styleName), + [name, styleName] + ) + + if (!Component) { + return null + } + + return React.createElement(Component) +} diff --git a/apps/v4/components/docs-base-switcher.tsx b/apps/v4/components/docs-base-switcher.tsx index 601f8df698..15c73036dd 100644 --- a/apps/v4/components/docs-base-switcher.tsx +++ b/apps/v4/components/docs-base-switcher.tsx @@ -10,20 +10,14 @@ export function DocsBaseSwitcher({ component: string }) { return ( -
+
{BASES.map((baseItem) => ( - {baseItem.meta?.logo && ( - - )} {baseItem.title} ))} diff --git a/apps/v4/components/docs-copy-page.tsx b/apps/v4/components/docs-copy-page.tsx index fe98a995d2..62e2ba94b3 100644 --- a/apps/v4/components/docs-copy-page.tsx +++ b/apps/v4/components/docs-copy-page.tsx @@ -168,7 +168,7 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) { return ( -
+
+ ``` + +## Examples + +### Basic + +A basic alert with an icon, title and description. + + + +### Destructive + +Use `variant="destructive"` to create a destructive alert. + + + +### Action + +Use `AlertAction` to add a button or other action element to the alert. + + + +### Custom Colors + +You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component. + + + +## API Reference + +### Alert + +The `Alert` component displays a callout for user attention. + +| Prop | Type | Default | +| --------- | ---------------------------- | ----------- | +| `variant` | `"default" \| "destructive"` | `"default"` | + +### AlertTitle + +The `AlertTitle` component displays the title of the alert. + +| Prop | Type | Default | +| ----------- | -------- | ------- | +| `className` | `string` | - | + +### AlertDescription + +The `AlertDescription` component displays the description or content of the alert. + +| Prop | Type | Default | +| ----------- | -------- | ------- | +| `className` | `string` | - | + +### AlertAction + +The `AlertAction` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert. + +| Prop | Type | Default | +| ----------- | -------- | ------- | +| `className` | `string` | - | diff --git a/apps/v4/content/docs/components/base/aspect-ratio.mdx b/apps/v4/content/docs/components/base/aspect-ratio.mdx index e6209b4ee6..bd6f0e948e 100644 --- a/apps/v4/content/docs/components/base/aspect-ratio.mdx +++ b/apps/v4/content/docs/components/base/aspect-ratio.mdx @@ -4,8 +4,8 @@ description: Displays content within a desired ratio. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio - api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference + doc: https://base-ui.com/react/components/aspect-ratio + api: https://base-ui.com/react/components/aspect-ratio#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/avatar.mdx b/apps/v4/content/docs/components/base/avatar.mdx index 967c374fea..d85ee8ddcb 100644 --- a/apps/v4/content/docs/components/base/avatar.mdx +++ b/apps/v4/content/docs/components/base/avatar.mdx @@ -4,8 +4,8 @@ description: An image element with a fallback for representing the user. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/avatar - api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference + doc: https://base-ui.com/react/components/avatar + api: https://base-ui.com/react/components/avatar#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/badge.mdx b/apps/v4/content/docs/components/base/badge.mdx index 810115edd8..7061af3c68 100644 --- a/apps/v4/content/docs/components/base/badge.mdx +++ b/apps/v4/content/docs/components/base/badge.mdx @@ -17,7 +17,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/breadcrumb.mdx b/apps/v4/content/docs/components/base/breadcrumb.mdx index 656a4d669e..b17a567a21 100644 --- a/apps/v4/content/docs/components/base/breadcrumb.mdx +++ b/apps/v4/content/docs/components/base/breadcrumb.mdx @@ -17,7 +17,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/button-group.mdx b/apps/v4/content/docs/components/base/button-group.mdx index db11b93f01..2990f96981 100644 --- a/apps/v4/content/docs/components/base/button-group.mdx +++ b/apps/v4/content/docs/components/base/button-group.mdx @@ -12,7 +12,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/button.mdx b/apps/v4/content/docs/components/base/button.mdx index 518fa070cf..43baf559bb 100644 --- a/apps/v4/content/docs/components/base/button.mdx +++ b/apps/v4/content/docs/components/base/button.mdx @@ -34,7 +34,7 @@ instructions to update your project. - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/calendar.mdx b/apps/v4/content/docs/components/base/calendar.mdx index 4400811163..d926d88fea 100644 --- a/apps/v4/content/docs/components/base/calendar.mdx +++ b/apps/v4/content/docs/components/base/calendar.mdx @@ -25,7 +25,7 @@ See all calendar blocks in the [Blocks Library](/blocks/calendar) page. - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/card.mdx b/apps/v4/content/docs/components/base/card.mdx index 58530977d3..621eaef268 100644 --- a/apps/v4/content/docs/components/base/card.mdx +++ b/apps/v4/content/docs/components/base/card.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/carousel.mdx b/apps/v4/content/docs/components/base/carousel.mdx index 02e51d9fe3..fd5eb35eb0 100644 --- a/apps/v4/content/docs/components/base/carousel.mdx +++ b/apps/v4/content/docs/components/base/carousel.mdx @@ -24,7 +24,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/chart.mdx b/apps/v4/content/docs/components/base/chart.mdx index 2ef8019c78..8e74f67746 100644 --- a/apps/v4/content/docs/components/base/chart.mdx +++ b/apps/v4/content/docs/components/base/chart.mdx @@ -62,7 +62,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/checkbox.mdx b/apps/v4/content/docs/components/base/checkbox.mdx index 8f0e86cb68..710ba06aa8 100644 --- a/apps/v4/content/docs/components/base/checkbox.mdx +++ b/apps/v4/content/docs/components/base/checkbox.mdx @@ -4,8 +4,8 @@ description: A control that allows the user to toggle between checked and not ch base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/checkbox - api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference + doc: https://base-ui.com/react/components/checkbox + api: https://base-ui.com/react/components/checkbox#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/collapsible.mdx b/apps/v4/content/docs/components/base/collapsible.mdx index d8b4a11856..8f74f1d3e1 100644 --- a/apps/v4/content/docs/components/base/collapsible.mdx +++ b/apps/v4/content/docs/components/base/collapsible.mdx @@ -5,8 +5,8 @@ base: base component: true featured: true links: - doc: https://www.radix-ui.com/docs/primitives/components/collapsible - api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference + doc: https://base-ui.com/react/components/collapsible + api: https://base-ui.com/react/components/collapsible#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/command.mdx b/apps/v4/content/docs/components/base/command.mdx index 62ba9db88d..94f426ba38 100644 --- a/apps/v4/content/docs/components/base/command.mdx +++ b/apps/v4/content/docs/components/base/command.mdx @@ -24,7 +24,7 @@ The `` component uses the [`cmdk`](https://cmdk.paco.me) component by - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/context-menu.mdx b/apps/v4/content/docs/components/base/context-menu.mdx index fe8e6bc4e4..32690feb42 100644 --- a/apps/v4/content/docs/components/base/context-menu.mdx +++ b/apps/v4/content/docs/components/base/context-menu.mdx @@ -4,8 +4,8 @@ description: Displays a menu to the user — such as a set of actions or functio base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/context-menu - api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference + doc: https://base-ui.com/react/components/context-menu + api: https://base-ui.com/react/components/context-menu#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/dialog.mdx b/apps/v4/content/docs/components/base/dialog.mdx index 7f6b3053c1..9a07c18ac7 100644 --- a/apps/v4/content/docs/components/base/dialog.mdx +++ b/apps/v4/content/docs/components/base/dialog.mdx @@ -5,8 +5,8 @@ featured: true base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/dialog - api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference + doc: https://base-ui.com/react/components/dialog + api: https://base-ui.com/react/components/dialog#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/drawer.mdx b/apps/v4/content/docs/components/base/drawer.mdx index af179960d9..04a2c80f9b 100644 --- a/apps/v4/content/docs/components/base/drawer.mdx +++ b/apps/v4/content/docs/components/base/drawer.mdx @@ -22,7 +22,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/dropdown-menu.mdx b/apps/v4/content/docs/components/base/dropdown-menu.mdx index 35019a2afb..c312ada83a 100644 --- a/apps/v4/content/docs/components/base/dropdown-menu.mdx +++ b/apps/v4/content/docs/components/base/dropdown-menu.mdx @@ -5,8 +5,8 @@ featured: true base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/dropdown-menu - api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference + doc: https://base-ui.com/react/components/dropdown-menu + api: https://base-ui.com/react/components/dropdown-menu#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/empty.mdx b/apps/v4/content/docs/components/base/empty.mdx index f29bdfec7c..db9b58af2a 100644 --- a/apps/v4/content/docs/components/base/empty.mdx +++ b/apps/v4/content/docs/components/base/empty.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/field.mdx b/apps/v4/content/docs/components/base/field.mdx index 8f96e26cb2..39c8ab4549 100644 --- a/apps/v4/content/docs/components/base/field.mdx +++ b/apps/v4/content/docs/components/base/field.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/hover-card.mdx b/apps/v4/content/docs/components/base/hover-card.mdx index 1234d5215f..16990f2e05 100644 --- a/apps/v4/content/docs/components/base/hover-card.mdx +++ b/apps/v4/content/docs/components/base/hover-card.mdx @@ -4,8 +4,8 @@ description: For sighted users to preview content available behind a link. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/hover-card - api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference + doc: https://base-ui.com/react/components/hover-card + api: https://base-ui.com/react/components/hover-card#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/input-group.mdx b/apps/v4/content/docs/components/base/input-group.mdx index 28e2eba954..eb514817ed 100644 --- a/apps/v4/content/docs/components/base/input-group.mdx +++ b/apps/v4/content/docs/components/base/input-group.mdx @@ -18,7 +18,7 @@ import { IconInfoCircle } from "@tabler/icons-react" - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/input-otp.mdx b/apps/v4/content/docs/components/base/input-otp.mdx index c2897c683f..760f1282ff 100644 --- a/apps/v4/content/docs/components/base/input-otp.mdx +++ b/apps/v4/content/docs/components/base/input-otp.mdx @@ -22,7 +22,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/input.mdx b/apps/v4/content/docs/components/base/input.mdx index 5ff77703cc..5061ada294 100644 --- a/apps/v4/content/docs/components/base/input.mdx +++ b/apps/v4/content/docs/components/base/input.mdx @@ -17,7 +17,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/item.mdx b/apps/v4/content/docs/components/base/item.mdx index 1e73b936be..fb386c4800 100644 --- a/apps/v4/content/docs/components/base/item.mdx +++ b/apps/v4/content/docs/components/base/item.mdx @@ -20,7 +20,7 @@ You can pretty much achieve the same result with the `div` element and some clas - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/kbd.mdx b/apps/v4/content/docs/components/base/kbd.mdx index b8cd804137..c7bd09d34a 100644 --- a/apps/v4/content/docs/components/base/kbd.mdx +++ b/apps/v4/content/docs/components/base/kbd.mdx @@ -12,7 +12,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/label.mdx b/apps/v4/content/docs/components/base/label.mdx index 314b7be6f9..2257cfa4dd 100644 --- a/apps/v4/content/docs/components/base/label.mdx +++ b/apps/v4/content/docs/components/base/label.mdx @@ -4,8 +4,8 @@ description: Renders an accessible label associated with controls. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/label - api: https://www.radix-ui.com/docs/primitives/components/label#api-reference + doc: https://base-ui.com/react/components/label + api: https://base-ui.com/react/components/label#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/menubar.mdx b/apps/v4/content/docs/components/base/menubar.mdx index 0f75bf2759..8bc316cef5 100644 --- a/apps/v4/content/docs/components/base/menubar.mdx +++ b/apps/v4/content/docs/components/base/menubar.mdx @@ -4,8 +4,8 @@ description: A visually persistent menu common in desktop applications that prov base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/menubar - api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference + doc: https://base-ui.com/react/components/menubar + api: https://base-ui.com/react/components/menubar#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/native-select.mdx b/apps/v4/content/docs/components/base/native-select.mdx index 2a4204cf97..52dbe16f90 100644 --- a/apps/v4/content/docs/components/base/native-select.mdx +++ b/apps/v4/content/docs/components/base/native-select.mdx @@ -19,7 +19,7 @@ import { InfoIcon } from "lucide-react" - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/navigation-menu.mdx b/apps/v4/content/docs/components/base/navigation-menu.mdx index 9deff87027..01f2f54938 100644 --- a/apps/v4/content/docs/components/base/navigation-menu.mdx +++ b/apps/v4/content/docs/components/base/navigation-menu.mdx @@ -4,8 +4,8 @@ description: A collection of links for navigating websites. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/navigation-menu - api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference + doc: https://base-ui.com/react/components/navigation-menu + api: https://base-ui.com/react/components/navigation-menu#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/pagination.mdx b/apps/v4/content/docs/components/base/pagination.mdx index e6139ffe82..f672863f96 100644 --- a/apps/v4/content/docs/components/base/pagination.mdx +++ b/apps/v4/content/docs/components/base/pagination.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/popover.mdx b/apps/v4/content/docs/components/base/popover.mdx index 20cacd6e10..763665fb49 100644 --- a/apps/v4/content/docs/components/base/popover.mdx +++ b/apps/v4/content/docs/components/base/popover.mdx @@ -4,8 +4,8 @@ description: Displays rich content in a portal, triggered by a button. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/popover - api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference + doc: https://base-ui.com/react/components/popover + api: https://base-ui.com/react/components/popover#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/progress.mdx b/apps/v4/content/docs/components/base/progress.mdx index 63252e17a7..16cf50d0bf 100644 --- a/apps/v4/content/docs/components/base/progress.mdx +++ b/apps/v4/content/docs/components/base/progress.mdx @@ -4,8 +4,8 @@ description: Displays an indicator showing the completion progress of a task, ty base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/progress - api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference + doc: https://base-ui.com/react/components/progress + api: https://base-ui.com/react/components/progress#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/radio-group.mdx b/apps/v4/content/docs/components/base/radio-group.mdx index 7d4f1b5f19..829db148f9 100644 --- a/apps/v4/content/docs/components/base/radio-group.mdx +++ b/apps/v4/content/docs/components/base/radio-group.mdx @@ -4,8 +4,8 @@ description: A set of checkable buttons—known as radio buttons—where no more base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/radio-group - api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference + doc: https://base-ui.com/react/components/radio-group + api: https://base-ui.com/react/components/radio-group#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/resizable.mdx b/apps/v4/content/docs/components/base/resizable.mdx index f180db53d3..823a409fb6 100644 --- a/apps/v4/content/docs/components/base/resizable.mdx +++ b/apps/v4/content/docs/components/base/resizable.mdx @@ -23,7 +23,7 @@ The `Resizable` component is built on top of [react-resizable-panels](https://gi - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/scroll-area.mdx b/apps/v4/content/docs/components/base/scroll-area.mdx index 49d4f9a1d0..ac61e6b000 100644 --- a/apps/v4/content/docs/components/base/scroll-area.mdx +++ b/apps/v4/content/docs/components/base/scroll-area.mdx @@ -4,8 +4,8 @@ description: Augments native scroll functionality for custom, cross-browser styl base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/scroll-area - api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference + doc: https://base-ui.com/react/components/scroll-area + api: https://base-ui.com/react/components/scroll-area#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/select.mdx b/apps/v4/content/docs/components/base/select.mdx index 4f283d9f4a..107df0ca83 100644 --- a/apps/v4/content/docs/components/base/select.mdx +++ b/apps/v4/content/docs/components/base/select.mdx @@ -5,8 +5,8 @@ base: base component: true featured: true links: - doc: https://www.radix-ui.com/docs/primitives/components/select - api: https://www.radix-ui.com/docs/primitives/components/select#api-reference + doc: https://base-ui.com/react/components/select + api: https://base-ui.com/react/components/select#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/separator.mdx b/apps/v4/content/docs/components/base/separator.mdx index bffc449063..0a9fc7a969 100644 --- a/apps/v4/content/docs/components/base/separator.mdx +++ b/apps/v4/content/docs/components/base/separator.mdx @@ -4,8 +4,8 @@ description: Visually or semantically separates content. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/separator - api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference + doc: https://base-ui.com/react/components/separator + api: https://base-ui.com/react/components/separator#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/sheet.mdx b/apps/v4/content/docs/components/base/sheet.mdx index cb3af896cd..8cdac53244 100644 --- a/apps/v4/content/docs/components/base/sheet.mdx +++ b/apps/v4/content/docs/components/base/sheet.mdx @@ -4,8 +4,8 @@ description: Extends the Dialog component to display content that complements th base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/dialog - api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference + doc: https://base-ui.com/react/components/sheet + api: https://base-ui.com/react/components/sheet#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/sidebar.mdx b/apps/v4/content/docs/components/base/sidebar.mdx index c96de9c47b..e66037c12c 100644 --- a/apps/v4/content/docs/components/base/sidebar.mdx +++ b/apps/v4/content/docs/components/base/sidebar.mdx @@ -35,7 +35,7 @@ Customizable. - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/skeleton.mdx b/apps/v4/content/docs/components/base/skeleton.mdx index e046883709..0bd6b88330 100644 --- a/apps/v4/content/docs/components/base/skeleton.mdx +++ b/apps/v4/content/docs/components/base/skeleton.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/slider.mdx b/apps/v4/content/docs/components/base/slider.mdx index 3fd419b2b7..907bcc7fb5 100644 --- a/apps/v4/content/docs/components/base/slider.mdx +++ b/apps/v4/content/docs/components/base/slider.mdx @@ -4,8 +4,8 @@ description: An input where the user selects a value from within a given range. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/slider - api: https://www.radix-ui.com/docs/primitives/components/slider#api-reference + doc: https://base-ui.com/react/components/slider + api: https://base-ui.com/react/components/slider#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/sonner.mdx b/apps/v4/content/docs/components/base/sonner.mdx index 71239fb04d..89a21f6556 100644 --- a/apps/v4/content/docs/components/base/sonner.mdx +++ b/apps/v4/content/docs/components/base/sonner.mdx @@ -18,7 +18,7 @@ Sonner is built and maintained by [emilkowalski](https://twitter.com/emilkowalsk - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/spinner.mdx b/apps/v4/content/docs/components/base/spinner.mdx index 57dc12ad5b..a418866ed3 100644 --- a/apps/v4/content/docs/components/base/spinner.mdx +++ b/apps/v4/content/docs/components/base/spinner.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/switch.mdx b/apps/v4/content/docs/components/base/switch.mdx index 4f4e4ef571..3005aa3520 100644 --- a/apps/v4/content/docs/components/base/switch.mdx +++ b/apps/v4/content/docs/components/base/switch.mdx @@ -4,8 +4,8 @@ description: A control that allows the user to toggle between checked and not ch base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/switch - api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference + doc: https://base-ui.com/react/components/switch + api: https://base-ui.com/react/components/switch#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/table.mdx b/apps/v4/content/docs/components/base/table.mdx index 8be9ebd62c..7f81dfd7b9 100644 --- a/apps/v4/content/docs/components/base/table.mdx +++ b/apps/v4/content/docs/components/base/table.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/tabs.mdx b/apps/v4/content/docs/components/base/tabs.mdx index d53678bb41..d0c125c389 100644 --- a/apps/v4/content/docs/components/base/tabs.mdx +++ b/apps/v4/content/docs/components/base/tabs.mdx @@ -4,8 +4,8 @@ description: A set of layered sections of content—known as tab panels—that a base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/tabs - api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference + doc: https://base-ui.com/react/components/tabs + api: https://base-ui.com/react/components/tabs#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/textarea.mdx b/apps/v4/content/docs/components/base/textarea.mdx index c80d19ab01..75479b8fa5 100644 --- a/apps/v4/content/docs/components/base/textarea.mdx +++ b/apps/v4/content/docs/components/base/textarea.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/toast.mdx b/apps/v4/content/docs/components/base/toast.mdx index 57b07f3bb8..6e2571a922 100644 --- a/apps/v4/content/docs/components/base/toast.mdx +++ b/apps/v4/content/docs/components/base/toast.mdx @@ -4,8 +4,8 @@ description: A succinct message that is displayed temporarily. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/toast - api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference + doc: https://base-ui.com/react/components/toast + api: https://base-ui.com/react/components/toast#api-reference --- diff --git a/apps/v4/content/docs/components/base/toggle-group.mdx b/apps/v4/content/docs/components/base/toggle-group.mdx index 8ddb15bf51..ebe5f78fe2 100644 --- a/apps/v4/content/docs/components/base/toggle-group.mdx +++ b/apps/v4/content/docs/components/base/toggle-group.mdx @@ -4,8 +4,8 @@ description: A set of two-state buttons that can be toggled on or off. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/toggle-group - api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference + doc: https://base-ui.com/react/components/toggle-group + api: https://base-ui.com/react/components/toggle-group#api-reference --- @@ -15,7 +15,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/toggle.mdx b/apps/v4/content/docs/components/base/toggle.mdx index a1e32cf81d..535bb9fb6b 100644 --- a/apps/v4/content/docs/components/base/toggle.mdx +++ b/apps/v4/content/docs/components/base/toggle.mdx @@ -4,8 +4,8 @@ description: A two-state button that can be either on or off. base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/toggle - api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference + doc: https://base-ui.com/react/components/toggle + api: https://base-ui.com/react/components/toggle#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/base/tooltip.mdx b/apps/v4/content/docs/components/base/tooltip.mdx index 5f758ca2da..2412826dfc 100644 --- a/apps/v4/content/docs/components/base/tooltip.mdx +++ b/apps/v4/content/docs/components/base/tooltip.mdx @@ -4,8 +4,8 @@ description: A popup that displays information related to an element when the el base: base component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/tooltip - api: https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference + doc: https://base-ui.com/react/components/tooltip + api: https://base-ui.com/react/components/tooltip#api-reference --- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/accordion.mdx b/apps/v4/content/docs/components/radix/accordion.mdx index 097f7dcb6d..ac8047d5c2 100644 --- a/apps/v4/content/docs/components/radix/accordion.mdx +++ b/apps/v4/content/docs/components/radix/accordion.mdx @@ -4,16 +4,15 @@ description: A vertically stacked set of interactive headings that each reveal a base: radix component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/accordion - api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference + doc: https://www.radix-ui.com/primitives/docs/components/accordion + api: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference --- ## Installation @@ -21,7 +20,7 @@ links: - CLI + Command Manual @@ -35,7 +34,7 @@ npx shadcn@latest add accordion - + Install the following dependencies: @@ -71,7 +70,7 @@ import { ``` ```tsx showLineNumbers - + Is it accessible? @@ -83,14 +82,26 @@ import { ## Examples +### Basic + +A basic accordion that shows one item at a time. The first item is open by default. + + + ### Multiple Use `type="multiple"` to allow multiple items to be open at the same time. ### Disabled @@ -98,27 +109,34 @@ Use `type="multiple"` to allow multiple items to be open at the same time. Use the `disabled` prop on `AccordionItem` to disable individual items. -### With Borders +### Borders -An accordion with bordered items. +Add `border` to the `Accordion` and `border-b last:border-b-0` to the `AccordionItem` to add borders to the items. -### In Card +### Card -An accordion inside a card component. +Wrap the `Accordion` in a `Card` component. + +## API Reference + +See the [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion#api-reference) documentation for more information. diff --git a/apps/v4/content/docs/components/radix/alert-dialog.mdx b/apps/v4/content/docs/components/radix/alert-dialog.mdx index c71efb52d4..e69f4e8366 100644 --- a/apps/v4/content/docs/components/radix/alert-dialog.mdx +++ b/apps/v4/content/docs/components/radix/alert-dialog.mdx @@ -5,15 +5,14 @@ featured: true base: radix component: true links: - doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog - api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference + doc: https://www.radix-ui.com/primitives/docs/components/alert-dialog + api: https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference --- ## Installation @@ -21,7 +20,7 @@ links: - CLI + Command Manual @@ -34,7 +33,7 @@ npx shadcn@latest add alert-dialog - + Install the following dependencies: @@ -76,13 +75,15 @@ import { ```tsx showLineNumbers - Open + + + Are you absolutely sure? This action cannot be undone. This will permanently delete your account - and remove your data from our servers. + from our servers. @@ -92,3 +93,67 @@ import { ``` + +## Examples + +### Basic + +A basic alert dialog with a title, description, and cancel and continue buttons. + + + +### Small + +Use the `size="sm"` prop to make the alert dialog smaller. + + + +### Media + +Use the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog. + + + +### Small with Media + +Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog. + + + +### Destructive + +Use the `AlertDialogAction` component to add a destructive action button to the alert dialog. + + + +## API Reference + +### size + +Use the `size` props on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values: + +| Prop | Type | Default | +| ------ | ------------------- | ----------- | +| `size` | `"default" \| "sm"` | `"default"` | + +For more information about the other components and their props, see the [Radix UI documentation](https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference). diff --git a/apps/v4/content/docs/components/radix/alert.mdx b/apps/v4/content/docs/components/radix/alert.mdx index d8f7e4e1d8..709ab5e458 100644 --- a/apps/v4/content/docs/components/radix/alert.mdx +++ b/apps/v4/content/docs/components/radix/alert.mdx @@ -6,10 +6,9 @@ component: true --- ## Installation @@ -17,7 +16,7 @@ component: true - CLI + Command Manual @@ -30,7 +29,7 @@ npx shadcn@latest add alert - + Copy and paste the following code into your project. @@ -51,15 +50,99 @@ npx shadcn@latest add alert ## Usage ```tsx showLineNumbers -import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" +import { + Alert, + AlertAction, + AlertDescription, + AlertTitle, +} from "@/components/ui/alert" ``` ```tsx showLineNumbers - - + + Heads up! You can add components and dependencies to your app using the cli. + + + ``` + +## Examples + +### Basic + +A basic alert with an icon, title and description. + + + +### Destructive + +Use `variant="destructive"` to create a destructive alert. + + + +### Action + +Use `AlertAction` to add a button or other action element to the alert. + + + +### Custom Colors + +You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component. + + + +## API Reference + +### Alert + +The `Alert` component displays a callout for user attention. + +| Prop | Type | Default | +| --------- | ---------------------------- | ----------- | +| `variant` | `"default" \| "destructive"` | `"default"` | + +### AlertTitle + +The `AlertTitle` component displays the title of the alert. + +| Prop | Type | Default | +| ----------- | -------- | ------- | +| `className` | `string` | - | + +### AlertDescription + +The `AlertDescription` component displays the description or content of the alert. + +| Prop | Type | Default | +| ----------- | -------- | ------- | +| `className` | `string` | - | + +### AlertAction + +The `AlertAction` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert. + +| Prop | Type | Default | +| ----------- | -------- | ------- | +| `className` | `string` | - | diff --git a/apps/v4/content/docs/components/radix/aspect-ratio.mdx b/apps/v4/content/docs/components/radix/aspect-ratio.mdx index 88b77daa6e..28c3cfbb2a 100644 --- a/apps/v4/content/docs/components/radix/aspect-ratio.mdx +++ b/apps/v4/content/docs/components/radix/aspect-ratio.mdx @@ -20,7 +20,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/avatar.mdx b/apps/v4/content/docs/components/radix/avatar.mdx index 8d2199f858..f695fddf0a 100644 --- a/apps/v4/content/docs/components/radix/avatar.mdx +++ b/apps/v4/content/docs/components/radix/avatar.mdx @@ -20,7 +20,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/badge.mdx b/apps/v4/content/docs/components/radix/badge.mdx index 3ec855bec1..8245632fe6 100644 --- a/apps/v4/content/docs/components/radix/badge.mdx +++ b/apps/v4/content/docs/components/radix/badge.mdx @@ -17,7 +17,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/breadcrumb.mdx b/apps/v4/content/docs/components/radix/breadcrumb.mdx index 92303a19ae..4d8826c93a 100644 --- a/apps/v4/content/docs/components/radix/breadcrumb.mdx +++ b/apps/v4/content/docs/components/radix/breadcrumb.mdx @@ -17,7 +17,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/button-group.mdx b/apps/v4/content/docs/components/radix/button-group.mdx index 310264021c..68de7271ac 100644 --- a/apps/v4/content/docs/components/radix/button-group.mdx +++ b/apps/v4/content/docs/components/radix/button-group.mdx @@ -12,7 +12,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/button.mdx b/apps/v4/content/docs/components/radix/button.mdx index 9020db5aa0..01191f6bba 100644 --- a/apps/v4/content/docs/components/radix/button.mdx +++ b/apps/v4/content/docs/components/radix/button.mdx @@ -34,7 +34,7 @@ instructions to update your project. - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/calendar.mdx b/apps/v4/content/docs/components/radix/calendar.mdx index 781b01d3eb..22edf04fba 100644 --- a/apps/v4/content/docs/components/radix/calendar.mdx +++ b/apps/v4/content/docs/components/radix/calendar.mdx @@ -25,7 +25,7 @@ See all calendar blocks in the [Blocks Library](/blocks/calendar) page. - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/card.mdx b/apps/v4/content/docs/components/radix/card.mdx index 295f7beca2..5c412dc2ec 100644 --- a/apps/v4/content/docs/components/radix/card.mdx +++ b/apps/v4/content/docs/components/radix/card.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/carousel.mdx b/apps/v4/content/docs/components/radix/carousel.mdx index f82a9a632b..1234249b47 100644 --- a/apps/v4/content/docs/components/radix/carousel.mdx +++ b/apps/v4/content/docs/components/radix/carousel.mdx @@ -24,7 +24,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/chart.mdx b/apps/v4/content/docs/components/radix/chart.mdx index 501684bba8..54fc83736b 100644 --- a/apps/v4/content/docs/components/radix/chart.mdx +++ b/apps/v4/content/docs/components/radix/chart.mdx @@ -62,7 +62,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/checkbox.mdx b/apps/v4/content/docs/components/radix/checkbox.mdx index e0fff4eeda..725fb84fb2 100644 --- a/apps/v4/content/docs/components/radix/checkbox.mdx +++ b/apps/v4/content/docs/components/radix/checkbox.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/collapsible.mdx b/apps/v4/content/docs/components/radix/collapsible.mdx index f647a3e6f2..53851d2697 100644 --- a/apps/v4/content/docs/components/radix/collapsible.mdx +++ b/apps/v4/content/docs/components/radix/collapsible.mdx @@ -20,7 +20,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/command.mdx b/apps/v4/content/docs/components/radix/command.mdx index 88278f9987..632ab9fea5 100644 --- a/apps/v4/content/docs/components/radix/command.mdx +++ b/apps/v4/content/docs/components/radix/command.mdx @@ -24,7 +24,7 @@ The `` component uses the [`cmdk`](https://cmdk.paco.me) component by - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/context-menu.mdx b/apps/v4/content/docs/components/radix/context-menu.mdx index e443b6890b..5614ae2a27 100644 --- a/apps/v4/content/docs/components/radix/context-menu.mdx +++ b/apps/v4/content/docs/components/radix/context-menu.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/dialog.mdx b/apps/v4/content/docs/components/radix/dialog.mdx index e24cda2830..e325e1e6dd 100644 --- a/apps/v4/content/docs/components/radix/dialog.mdx +++ b/apps/v4/content/docs/components/radix/dialog.mdx @@ -20,7 +20,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/drawer.mdx b/apps/v4/content/docs/components/radix/drawer.mdx index 72f61872d3..0ba4e0d45b 100644 --- a/apps/v4/content/docs/components/radix/drawer.mdx +++ b/apps/v4/content/docs/components/radix/drawer.mdx @@ -22,7 +22,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/dropdown-menu.mdx b/apps/v4/content/docs/components/radix/dropdown-menu.mdx index d643acf3c2..57f801c452 100644 --- a/apps/v4/content/docs/components/radix/dropdown-menu.mdx +++ b/apps/v4/content/docs/components/radix/dropdown-menu.mdx @@ -20,7 +20,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/empty.mdx b/apps/v4/content/docs/components/radix/empty.mdx index 4807196495..ef12fe5d7f 100644 --- a/apps/v4/content/docs/components/radix/empty.mdx +++ b/apps/v4/content/docs/components/radix/empty.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/field.mdx b/apps/v4/content/docs/components/radix/field.mdx index d3de9f2a88..949e6a3452 100644 --- a/apps/v4/content/docs/components/radix/field.mdx +++ b/apps/v4/content/docs/components/radix/field.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/hover-card.mdx b/apps/v4/content/docs/components/radix/hover-card.mdx index 9b1ff26296..5499ccc1a8 100644 --- a/apps/v4/content/docs/components/radix/hover-card.mdx +++ b/apps/v4/content/docs/components/radix/hover-card.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/input-group.mdx b/apps/v4/content/docs/components/radix/input-group.mdx index 91329d8df3..43bfdd1ef3 100644 --- a/apps/v4/content/docs/components/radix/input-group.mdx +++ b/apps/v4/content/docs/components/radix/input-group.mdx @@ -18,7 +18,7 @@ import { IconInfoCircle } from "@tabler/icons-react" - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/input-otp.mdx b/apps/v4/content/docs/components/radix/input-otp.mdx index 7b7fe9b299..27726b63ef 100644 --- a/apps/v4/content/docs/components/radix/input-otp.mdx +++ b/apps/v4/content/docs/components/radix/input-otp.mdx @@ -22,7 +22,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input- - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/input.mdx b/apps/v4/content/docs/components/radix/input.mdx index e793f4bb94..692db28e8b 100644 --- a/apps/v4/content/docs/components/radix/input.mdx +++ b/apps/v4/content/docs/components/radix/input.mdx @@ -17,7 +17,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/item.mdx b/apps/v4/content/docs/components/radix/item.mdx index 87d5fd4e4a..a87184a8b5 100644 --- a/apps/v4/content/docs/components/radix/item.mdx +++ b/apps/v4/content/docs/components/radix/item.mdx @@ -20,7 +20,7 @@ You can pretty much achieve the same result with the `div` element and some clas - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/kbd.mdx b/apps/v4/content/docs/components/radix/kbd.mdx index f5e5476864..e089395f9b 100644 --- a/apps/v4/content/docs/components/radix/kbd.mdx +++ b/apps/v4/content/docs/components/radix/kbd.mdx @@ -12,7 +12,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/label.mdx b/apps/v4/content/docs/components/radix/label.mdx index 92d510a7cc..5abbd804f0 100644 --- a/apps/v4/content/docs/components/radix/label.mdx +++ b/apps/v4/content/docs/components/radix/label.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/menubar.mdx b/apps/v4/content/docs/components/radix/menubar.mdx index 36a8814066..db979386af 100644 --- a/apps/v4/content/docs/components/radix/menubar.mdx +++ b/apps/v4/content/docs/components/radix/menubar.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/native-select.mdx b/apps/v4/content/docs/components/radix/native-select.mdx index 4bf8ebfe91..1d8d1fb72a 100644 --- a/apps/v4/content/docs/components/radix/native-select.mdx +++ b/apps/v4/content/docs/components/radix/native-select.mdx @@ -19,7 +19,7 @@ import { InfoIcon } from "lucide-react" - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/navigation-menu.mdx b/apps/v4/content/docs/components/radix/navigation-menu.mdx index 6ed9961f27..9fbe0e72c3 100644 --- a/apps/v4/content/docs/components/radix/navigation-menu.mdx +++ b/apps/v4/content/docs/components/radix/navigation-menu.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/pagination.mdx b/apps/v4/content/docs/components/radix/pagination.mdx index 84675f1365..f6158d6058 100644 --- a/apps/v4/content/docs/components/radix/pagination.mdx +++ b/apps/v4/content/docs/components/radix/pagination.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/popover.mdx b/apps/v4/content/docs/components/radix/popover.mdx index 276f0f5643..a0335f062d 100644 --- a/apps/v4/content/docs/components/radix/popover.mdx +++ b/apps/v4/content/docs/components/radix/popover.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/progress.mdx b/apps/v4/content/docs/components/radix/progress.mdx index 61780e81aa..71418d948b 100644 --- a/apps/v4/content/docs/components/radix/progress.mdx +++ b/apps/v4/content/docs/components/radix/progress.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/radio-group.mdx b/apps/v4/content/docs/components/radix/radio-group.mdx index 11a03dce42..9a3271e7fb 100644 --- a/apps/v4/content/docs/components/radix/radio-group.mdx +++ b/apps/v4/content/docs/components/radix/radio-group.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/resizable.mdx b/apps/v4/content/docs/components/radix/resizable.mdx index feecf09efb..e1c97ead6f 100644 --- a/apps/v4/content/docs/components/radix/resizable.mdx +++ b/apps/v4/content/docs/components/radix/resizable.mdx @@ -23,7 +23,7 @@ The `Resizable` component is built on top of [react-resizable-panels](https://gi - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/scroll-area.mdx b/apps/v4/content/docs/components/radix/scroll-area.mdx index 117a3ab83d..8ac128ea8f 100644 --- a/apps/v4/content/docs/components/radix/scroll-area.mdx +++ b/apps/v4/content/docs/components/radix/scroll-area.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/select.mdx b/apps/v4/content/docs/components/radix/select.mdx index 58c65d42bf..541a9db4b3 100644 --- a/apps/v4/content/docs/components/radix/select.mdx +++ b/apps/v4/content/docs/components/radix/select.mdx @@ -20,7 +20,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/separator.mdx b/apps/v4/content/docs/components/radix/separator.mdx index a874ecc0d4..46aa7457e4 100644 --- a/apps/v4/content/docs/components/radix/separator.mdx +++ b/apps/v4/content/docs/components/radix/separator.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/sheet.mdx b/apps/v4/content/docs/components/radix/sheet.mdx index 10ad2c8f9a..dd79a598e4 100644 --- a/apps/v4/content/docs/components/radix/sheet.mdx +++ b/apps/v4/content/docs/components/radix/sheet.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/sidebar.mdx b/apps/v4/content/docs/components/radix/sidebar.mdx index 193daa7429..1f6e812ee8 100644 --- a/apps/v4/content/docs/components/radix/sidebar.mdx +++ b/apps/v4/content/docs/components/radix/sidebar.mdx @@ -35,7 +35,7 @@ Customizable. - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/skeleton.mdx b/apps/v4/content/docs/components/radix/skeleton.mdx index c2779a9535..f02e31224d 100644 --- a/apps/v4/content/docs/components/radix/skeleton.mdx +++ b/apps/v4/content/docs/components/radix/skeleton.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/slider.mdx b/apps/v4/content/docs/components/radix/slider.mdx index ad23a5c6de..4103101252 100644 --- a/apps/v4/content/docs/components/radix/slider.mdx +++ b/apps/v4/content/docs/components/radix/slider.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/sonner.mdx b/apps/v4/content/docs/components/radix/sonner.mdx index 42bf72fc42..a7d744a649 100644 --- a/apps/v4/content/docs/components/radix/sonner.mdx +++ b/apps/v4/content/docs/components/radix/sonner.mdx @@ -18,7 +18,7 @@ Sonner is built and maintained by [emilkowalski](https://twitter.com/emilkowalsk - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/spinner.mdx b/apps/v4/content/docs/components/radix/spinner.mdx index 4271569f96..b070395069 100644 --- a/apps/v4/content/docs/components/radix/spinner.mdx +++ b/apps/v4/content/docs/components/radix/spinner.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/switch.mdx b/apps/v4/content/docs/components/radix/switch.mdx index 77d1a3b0d5..a9f4c26b15 100644 --- a/apps/v4/content/docs/components/radix/switch.mdx +++ b/apps/v4/content/docs/components/radix/switch.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/table.mdx b/apps/v4/content/docs/components/radix/table.mdx index 430588aca8..c851cc480a 100644 --- a/apps/v4/content/docs/components/radix/table.mdx +++ b/apps/v4/content/docs/components/radix/table.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/tabs.mdx b/apps/v4/content/docs/components/radix/tabs.mdx index 2ab8f39622..d0af1f2fe2 100644 --- a/apps/v4/content/docs/components/radix/tabs.mdx +++ b/apps/v4/content/docs/components/radix/tabs.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/textarea.mdx b/apps/v4/content/docs/components/radix/textarea.mdx index bcf23b7088..d780348fa2 100644 --- a/apps/v4/content/docs/components/radix/textarea.mdx +++ b/apps/v4/content/docs/components/radix/textarea.mdx @@ -16,7 +16,7 @@ component: true - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/toggle-group.mdx b/apps/v4/content/docs/components/radix/toggle-group.mdx index 9c9220e60d..cb21ead379 100644 --- a/apps/v4/content/docs/components/radix/toggle-group.mdx +++ b/apps/v4/content/docs/components/radix/toggle-group.mdx @@ -15,7 +15,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/toggle.mdx b/apps/v4/content/docs/components/radix/toggle.mdx index 7832aa4b4d..9c94932d81 100644 --- a/apps/v4/content/docs/components/radix/toggle.mdx +++ b/apps/v4/content/docs/components/radix/toggle.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/components/radix/tooltip.mdx b/apps/v4/content/docs/components/radix/tooltip.mdx index 85ede50a0f..17763c9448 100644 --- a/apps/v4/content/docs/components/radix/tooltip.mdx +++ b/apps/v4/content/docs/components/radix/tooltip.mdx @@ -19,7 +19,7 @@ links: - CLI + Command Manual diff --git a/apps/v4/content/docs/meta.json b/apps/v4/content/docs/meta.json index 18ad1d0492..78e7c7b120 100644 --- a/apps/v4/content/docs/meta.json +++ b/apps/v4/content/docs/meta.json @@ -1,9 +1,9 @@ { "root": true, "pages": [ + "components", "(root)", "changelog", - "components", "forms", "installation", "dark-mode", diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx index e816d6bb90..3e60548f07 100644 --- a/apps/v4/examples/__index__.tsx +++ b/apps/v4/examples/__index__.tsx @@ -70,19 +70,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "accordion-in-card": { - name: "accordion-in-card", - filePath: "examples/radix/accordion-in-card.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/accordion-in-card") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "accordion-in-card" - return { default: mod.default || mod[exportName] } - }), - }, "accordion-multiple": { name: "accordion-multiple", filePath: "examples/radix/accordion-multiple.tsx", @@ -96,29 +83,42 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "accordion-with-borders": { - name: "accordion-with-borders", - filePath: "examples/radix/accordion-with-borders.tsx", + "alert-action": { + name: "alert-action", + filePath: "examples/radix/alert-action.tsx", component: React.lazy(async () => { - const mod = await import("./radix/accordion-with-borders") + const mod = await import("./radix/alert-action") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "accordion-with-borders" + ) || "alert-action" return { default: mod.default || mod[exportName] } }), }, - "accordion-with-disabled": { - name: "accordion-with-disabled", - filePath: "examples/radix/accordion-with-disabled.tsx", + "alert-basic": { + name: "alert-basic", + filePath: "examples/radix/alert-basic.tsx", component: React.lazy(async () => { - const mod = await import("./radix/accordion-with-disabled") + const mod = await import("./radix/alert-basic") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "accordion-with-disabled" + ) || "alert-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-colors": { + name: "alert-colors", + filePath: "examples/radix/alert-colors.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-colors") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-colors" return { default: mod.default || mod[exportName] } }), }, @@ -187,29 +187,29 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "alert-dialog-in-dialog": { - name: "alert-dialog-in-dialog", - filePath: "examples/radix/alert-dialog-in-dialog.tsx", + "alert-dialog-media": { + name: "alert-dialog-media", + filePath: "examples/radix/alert-dialog-media.tsx", component: React.lazy(async () => { - const mod = await import("./radix/alert-dialog-in-dialog") + const mod = await import("./radix/alert-dialog-media") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-dialog-in-dialog" + ) || "alert-dialog-media" return { default: mod.default || mod[exportName] } }), }, - "alert-dialog-small-with-media": { - name: "alert-dialog-small-with-media", - filePath: "examples/radix/alert-dialog-small-with-media.tsx", + "alert-dialog-small-media": { + name: "alert-dialog-small-media", + filePath: "examples/radix/alert-dialog-small-media.tsx", component: React.lazy(async () => { - const mod = await import("./radix/alert-dialog-small-with-media") + const mod = await import("./radix/alert-dialog-small-media") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-dialog-small-with-media" + ) || "alert-dialog-small-media" return { default: mod.default || mod[exportName] } }), }, @@ -226,71 +226,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "alert-dialog-with-media": { - name: "alert-dialog-with-media", - filePath: "examples/radix/alert-dialog-with-media.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/alert-dialog-with-media") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-dialog-with-media" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example1": { - name: "alert-example1", - filePath: "examples/radix/alert-example1.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/alert-example1") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example1" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example2": { - name: "alert-example2", - filePath: "examples/radix/alert-example2.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/alert-example2") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example2" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example3": { - name: "alert-example3", - filePath: "examples/radix/alert-example3.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/alert-example3") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example3" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example4": { - name: "alert-example4", - filePath: "examples/radix/alert-example4.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/alert-example4") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example4" - return { default: mod.default || mod[exportName] } - }), - }, "aspect-ratio-demo": { name: "aspect-ratio-demo", filePath: "examples/radix/aspect-ratio-demo.tsx", @@ -7367,19 +7302,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "accordion-in-card": { - name: "accordion-in-card", - filePath: "examples/base/accordion-in-card.tsx", - component: React.lazy(async () => { - const mod = await import("./base/accordion-in-card") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "accordion-in-card" - return { default: mod.default || mod[exportName] } - }), - }, "accordion-multiple": { name: "accordion-multiple", filePath: "examples/base/accordion-multiple.tsx", @@ -7393,29 +7315,42 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "accordion-with-borders": { - name: "accordion-with-borders", - filePath: "examples/base/accordion-with-borders.tsx", + "alert-action": { + name: "alert-action", + filePath: "examples/base/alert-action.tsx", component: React.lazy(async () => { - const mod = await import("./base/accordion-with-borders") + const mod = await import("./base/alert-action") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "accordion-with-borders" + ) || "alert-action" return { default: mod.default || mod[exportName] } }), }, - "accordion-with-disabled": { - name: "accordion-with-disabled", - filePath: "examples/base/accordion-with-disabled.tsx", + "alert-basic": { + name: "alert-basic", + filePath: "examples/base/alert-basic.tsx", component: React.lazy(async () => { - const mod = await import("./base/accordion-with-disabled") + const mod = await import("./base/alert-basic") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "accordion-with-disabled" + ) || "alert-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-colors": { + name: "alert-colors", + filePath: "examples/base/alert-colors.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-colors") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-colors" return { default: mod.default || mod[exportName] } }), }, @@ -7484,29 +7419,29 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "alert-dialog-in-dialog": { - name: "alert-dialog-in-dialog", - filePath: "examples/base/alert-dialog-in-dialog.tsx", + "alert-dialog-media": { + name: "alert-dialog-media", + filePath: "examples/base/alert-dialog-media.tsx", component: React.lazy(async () => { - const mod = await import("./base/alert-dialog-in-dialog") + const mod = await import("./base/alert-dialog-media") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-dialog-in-dialog" + ) || "alert-dialog-media" return { default: mod.default || mod[exportName] } }), }, - "alert-dialog-small-with-media": { - name: "alert-dialog-small-with-media", - filePath: "examples/base/alert-dialog-small-with-media.tsx", + "alert-dialog-small-media": { + name: "alert-dialog-small-media", + filePath: "examples/base/alert-dialog-small-media.tsx", component: React.lazy(async () => { - const mod = await import("./base/alert-dialog-small-with-media") + const mod = await import("./base/alert-dialog-small-media") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-dialog-small-with-media" + ) || "alert-dialog-small-media" return { default: mod.default || mod[exportName] } }), }, @@ -7523,71 +7458,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "alert-dialog-with-media": { - name: "alert-dialog-with-media", - filePath: "examples/base/alert-dialog-with-media.tsx", - component: React.lazy(async () => { - const mod = await import("./base/alert-dialog-with-media") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-dialog-with-media" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example1": { - name: "alert-example1", - filePath: "examples/base/alert-example1.tsx", - component: React.lazy(async () => { - const mod = await import("./base/alert-example1") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example1" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example2": { - name: "alert-example2", - filePath: "examples/base/alert-example2.tsx", - component: React.lazy(async () => { - const mod = await import("./base/alert-example2") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example2" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example3": { - name: "alert-example3", - filePath: "examples/base/alert-example3.tsx", - component: React.lazy(async () => { - const mod = await import("./base/alert-example3") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example3" - return { default: mod.default || mod[exportName] } - }), - }, - "alert-example4": { - name: "alert-example4", - filePath: "examples/base/alert-example4.tsx", - component: React.lazy(async () => { - const mod = await import("./base/alert-example4") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "alert-example4" - return { default: mod.default || mod[exportName] } - }), - }, "aspect-ratio-demo": { name: "aspect-ratio-demo", filePath: "examples/base/aspect-ratio-demo.tsx", diff --git a/apps/v4/examples/base/accordion-basic.tsx b/apps/v4/examples/base/accordion-basic.tsx index 6236262998..1d5a096c31 100644 --- a/apps/v4/examples/base/accordion-basic.tsx +++ b/apps/v4/examples/base/accordion-basic.tsx @@ -5,29 +5,30 @@ import { AccordionTrigger, } from "@/examples/base/ui/accordion" -export function AccordionBasic() { - const items = [ - { - value: "item-1", - trigger: "Is it accessible?", - content: "Yes. It adheres to the WAI-ARIA design pattern.", - }, - { - value: "item-2", - trigger: "Is it styled?", - content: - "Yes. It comes with default styles that matches the other components' aesthetic.", - }, - { - value: "item-3", - trigger: "Is it animated?", - content: - "Yes. It's animated by default, but you can disable it if you prefer.", - }, - ] +const items = [ + { + value: "item-1", + trigger: "How do I reset my password?", + content: + "Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.", + }, + { + value: "item-2", + trigger: "Can I change my subscription plan?", + content: + "Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.", + }, + { + value: "item-3", + trigger: "What payment methods do you accept?", + content: + "We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.", + }, +] +export function AccordionBasic() { return ( - + {items.map((item) => ( {item.trigger} diff --git a/apps/v4/examples/base/accordion-borders.tsx b/apps/v4/examples/base/accordion-borders.tsx index 53e3bfe2aa..70bcb4275f 100644 --- a/apps/v4/examples/base/accordion-borders.tsx +++ b/apps/v4/examples/base/accordion-borders.tsx @@ -5,42 +5,43 @@ import { AccordionTrigger, } from "@/examples/base/ui/accordion" +const items = [ + { + value: "billing", + trigger: "How does billing work?", + content: + "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.", + }, + { + value: "security", + trigger: "Is my data secure?", + content: + "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.", + }, + { + value: "integration", + trigger: "What integrations do you support?", + content: + "We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.", + }, +] + export default function AccordionBorders() { return ( - - - How does billing work? - - We offer monthly and annual subscription plans. Billing is charged at - the beginning of each cycle, and you can cancel anytime. All plans - include automatic backups, 24/7 support, and unlimited team members. - - - - Is my data secure? - - Yes. We use end-to-end encryption, SOC 2 Type II compliance, and - regular third-party security audits. All data is encrypted at rest and - in transit using industry-standard protocols. - - - - What integrations do you support? - - We integrate with 500+ popular tools including Slack, Zapier, - Salesforce, HubSpot, and more. You can also build custom integrations - using our REST API and webhooks. - - + + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} ) } diff --git a/apps/v4/examples/base/accordion-card.tsx b/apps/v4/examples/base/accordion-card.tsx index 66d097fa9c..b226f843f2 100644 --- a/apps/v4/examples/base/accordion-card.tsx +++ b/apps/v4/examples/base/accordion-card.tsx @@ -12,47 +12,45 @@ import { CardTitle, } from "@/examples/base/ui/card" +const items = [ + { + value: "plans", + trigger: "What subscription plans do you offer?", + content: + "We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.", + }, + { + value: "billing", + trigger: "How does billing work?", + content: + "Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.", + }, + { + value: "cancel", + trigger: "How do I cancel my subscription?", + content: + "You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.", + }, +] + export default function AccordionCard() { return ( Subscription & Billing - Common questions about your account, plans, and payments + Common questions about your account, plans, payments and + cancellations. - - - What subscription plans do you offer? - - - We offer three subscription tiers: Starter ($9/month), - Professional ($29/month), and Enterprise ($99/month). Each plan - includes increasing storage limits, API access, priority support, - and team collaboration features. - - - - How does billing work? - - Billing occurs automatically at the start of each billing cycle. - We accept all major credit cards, PayPal, and ACH transfers for - enterprise customers. You'll receive an invoice via email - after each payment. - - - - - How do I cancel my subscription? - - - You can cancel your subscription anytime from your account - settings. There are no cancellation fees or penalties. Your access - will continue until the end of your current billing period. - - + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} diff --git a/apps/v4/examples/base/accordion-demo.tsx b/apps/v4/examples/base/accordion-demo.tsx index 486feb75dc..f5476abe62 100644 --- a/apps/v4/examples/base/accordion-demo.tsx +++ b/apps/v4/examples/base/accordion-demo.tsx @@ -7,25 +7,26 @@ import { export default function AccordionDemo() { return ( - - - Is it accessible? + + + What are your shipping options? - Yes. It adheres to the WAI-ARIA design pattern. + We offer standard (5-7 days), express (2-3 days), and overnight + shipping. Free shipping on international orders. - - Is it styled? + + What is your return policy? - Yes. It comes with default styles that matches the other - components' aesthetic. + Returns accepted within 30 days. Items must be unused and in original + packaging. Refunds processed within 5-7 business days. - - Is it animated? + + How can I contact customer support? - Yes. It's animated by default, but you can disable it if you - prefer. + Reach us via email, live chat, or phone. We respond within 24 hours + during business days. diff --git a/apps/v4/examples/base/accordion-in-card.tsx b/apps/v4/examples/base/accordion-in-card.tsx deleted file mode 100644 index a835e281c0..0000000000 --- a/apps/v4/examples/base/accordion-in-card.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/examples/base/ui/accordion" -import { Button } from "@/examples/base/ui/button" -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/examples/base/ui/card" -import { ArrowUpRightIcon } from "lucide-react" - -export function AccordionInCard() { - const items = [ - { - value: "plans", - trigger: "What subscription plans do you offer?", - content: ( - <> -

- We offer three subscription tiers: Starter ($9/month), Professional - ($29/month), and Enterprise ($99/month). Each plan includes - increasing storage limits, API access, priority support, and team - collaboration features. -

-

- Annual billing is available with a 20% discount. All - plans include a 14-day free trial with no credit card required. -

- - - ), - }, - { - value: "billing", - trigger: "How does billing work?", - content: ( - <> -

- Billing occurs automatically at the start of each billing cycle. We - accept all major credit cards, PayPal, and ACH transfers for - enterprise customers. -

-

- You'll receive an invoice via email after each payment. You can - update your payment method or billing information anytime in your - account settings. Failed payments will trigger automated retry - attempts and email notifications. -

- - ), - }, - { - value: "upgrade", - trigger: "Can I upgrade or downgrade my plan?", - content: ( - <> -

- Yes, you can change your plan at any time. When upgrading, - you'll be charged a prorated amount for the remainder of your - billing cycle and immediately gain access to new features. -

-

- When downgrading, the change takes effect at the end of your current - billing period, and you'll retain access to premium features - until then. No refunds are provided for downgrades. -

- - ), - }, - { - value: "cancel", - trigger: "How do I cancel my subscription?", - content: ( - <> -

- You can cancel your subscription anytime from your account settings. - There are no cancellation fees or penalties. Your access will - continue until the end of your current billing period. -

-

- After cancellation, your data is retained for 30 days in case you - want to reactivate. You can export all your data before or after - canceling. We'd love to hear your feedback about why - you're leaving. -

- - ), - }, - { - value: "refund", - trigger: "What is your refund policy?", - content: ( - <> -

- We offer a 30-day money-back guarantee for new subscriptions. If - you're not satisfied within the first 30 days, contact our - support team for a full refund. -

-

- After 30 days, we don't provide refunds for partial billing - periods, but you can cancel anytime to avoid future charges. - Enterprise customers have custom refund terms outlined in their - contracts. -

- - ), - }, - ] - - return ( - - - Subscription & Billing - - Common questions about your account, plans, and payments - - - - - {items.map((item) => ( - - {item.trigger} - {item.content} - - ))} - - - - ) -} diff --git a/apps/v4/examples/base/accordion-multiple.tsx b/apps/v4/examples/base/accordion-multiple.tsx index 94a6fd33de..2243aa4e35 100644 --- a/apps/v4/examples/base/accordion-multiple.tsx +++ b/apps/v4/examples/base/accordion-multiple.tsx @@ -5,26 +5,30 @@ import { AccordionTrigger, } from "@/examples/base/ui/accordion" -export function AccordionMultiple() { - const items = [ - { - value: "item-1", - trigger: - "What are the key considerations when implementing a comprehensive enterprise-level authentication system?", - content: - "Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.", - }, - { - value: "item-2", - trigger: - "How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?", - content: - "Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.", - }, - ] +const items = [ + { + value: "notifications", + trigger: "Notification Settings", + content: + "Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.", + }, + { + value: "privacy", + trigger: "Privacy & Security", + content: + "Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.", + }, + { + value: "billing", + trigger: "Billing & Subscription", + content: + "View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.", + }, +] +export function AccordionMultiple() { return ( - + {items.map((item) => ( {item.trigger} diff --git a/apps/v4/examples/base/accordion-with-borders.tsx b/apps/v4/examples/base/accordion-with-borders.tsx deleted file mode 100644 index 7e271f681a..0000000000 --- a/apps/v4/examples/base/accordion-with-borders.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/examples/base/ui/accordion" - -export function AccordionWithBorders() { - const items = [ - { - value: "billing", - trigger: "How does billing work?", - content: - "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.", - }, - { - value: "security", - trigger: "Is my data secure?", - content: - "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.", - }, - { - value: "integration", - trigger: "What integrations do you support?", - content: ( - <> -

- We integrate with 500+ popular tools including Slack, Zapier, - Salesforce, HubSpot, and more. You can also build custom - integrations using our REST API and webhooks.{" "} -

-

- Our API documentation includes code examples in 10+ programming - languages. -

- - ), - }, - ] - - return ( - - {items.map((item) => ( - - - {item.trigger} - - - {item.content} - - - ))} - - ) -} diff --git a/apps/v4/examples/base/accordion-with-disabled.tsx b/apps/v4/examples/base/accordion-with-disabled.tsx deleted file mode 100644 index ace185f314..0000000000 --- a/apps/v4/examples/base/accordion-with-disabled.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/examples/base/ui/accordion" - -export function AccordionWithDisabled() { - const items = [ - { - value: "item-1", - trigger: "Can I access my account history?", - content: - "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.", - disabled: false, - }, - { - value: "item-2", - trigger: "Premium feature information", - content: - "This section contains information about premium features. Upgrade your plan to access this content.", - disabled: true, - }, - { - value: "item-3", - trigger: "How do I update my email address?", - content: - "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.", - disabled: false, - }, - ] - - return ( - - {items.map((item) => ( - - - {item.trigger} - - - {item.content} - - - ))} - - ) -} diff --git a/apps/v4/examples/base/alert-action.tsx b/apps/v4/examples/base/alert-action.tsx new file mode 100644 index 0000000000..a31d59241f --- /dev/null +++ b/apps/v4/examples/base/alert-action.tsx @@ -0,0 +1,23 @@ +import { + Alert, + AlertAction, + AlertDescription, + AlertTitle, +} from "@/examples/base/ui/alert" +import { Button } from "@/examples/base/ui/button" + +export default function AlertActionExample() { + return ( + + Dark mode is now available + + Enable it under your profile settings to get started. + + + + + + ) +} diff --git a/apps/v4/examples/base/alert-basic.tsx b/apps/v4/examples/base/alert-basic.tsx new file mode 100644 index 0000000000..1c68968765 --- /dev/null +++ b/apps/v4/examples/base/alert-basic.tsx @@ -0,0 +1,15 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" +import { CheckCircle2Icon } from "lucide-react" + +export default function AlertBasic() { + return ( + + + Account updated successfully + + Your profile information has been saved. Changes will be reflected + immediately. + + + ) +} diff --git a/apps/v4/examples/base/alert-colors.tsx b/apps/v4/examples/base/alert-colors.tsx new file mode 100644 index 0000000000..1cf1fcaff6 --- /dev/null +++ b/apps/v4/examples/base/alert-colors.tsx @@ -0,0 +1,15 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" +import { AlertTriangleIcon } from "lucide-react" + +export default function AlertColors() { + return ( + + + Your subscription will expire in 3 days. + + Renew now to avoid service interruption or upgrade to a paid plan to + continue using the service. + + + ) +} diff --git a/apps/v4/examples/base/alert-demo.tsx b/apps/v4/examples/base/alert-demo.tsx index e0229b5587..129e2f7b7a 100644 --- a/apps/v4/examples/base/alert-demo.tsx +++ b/apps/v4/examples/base/alert-demo.tsx @@ -1,32 +1,23 @@ import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" -import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react" +import { CheckCircle2Icon, InfoIcon } from "lucide-react" export default function AlertDemo() { return ( -
+
- Success! Your changes have been saved + Payment successful - This is an alert with icon, title and description. + Your payment of $29.99 has been processed. A receipt has been sent to + your email address. - - - This Alert has a title and an icon. No description. - - - - - Unable to process your payment. + + New feature available -

Please verify your billing information and try again.

-
    -
  • Check your card details
    • -
  • Ensure sufficient funds
    • -
  • Verify billing address
    • -
+ We've added dark mode support. You can enable it in your account + settings.
diff --git a/apps/v4/examples/base/alert-destructive.tsx b/apps/v4/examples/base/alert-destructive.tsx index ad3a1307c4..052a0da5a4 100644 --- a/apps/v4/examples/base/alert-destructive.tsx +++ b/apps/v4/examples/base/alert-destructive.tsx @@ -3,11 +3,12 @@ import { AlertCircleIcon } from "lucide-react" export default function AlertDestructive() { return ( - + - Error + Payment failed - Your session has expired. Please log in again. + Your payment could not be processed. Please check your payment method + and try again. ) diff --git a/apps/v4/examples/base/alert-dialog-basic.tsx b/apps/v4/examples/base/alert-dialog-basic.tsx index b2fa0336c2..e7244dd074 100644 --- a/apps/v4/examples/base/alert-dialog-basic.tsx +++ b/apps/v4/examples/base/alert-dialog-basic.tsx @@ -14,7 +14,9 @@ import { Button } from "@/examples/base/ui/button" export function AlertDialogBasic() { return ( - Default} /> + Show Dialog} + /> Are you absolutely sure? diff --git a/apps/v4/examples/base/alert-dialog-demo.tsx b/apps/v4/examples/base/alert-dialog-demo.tsx index f700856fab..df67a8dc38 100644 --- a/apps/v4/examples/base/alert-dialog-demo.tsx +++ b/apps/v4/examples/base/alert-dialog-demo.tsx @@ -22,7 +22,7 @@ export default function AlertDialogDemo() { Are you absolutely sure? This action cannot be undone. This will permanently delete your - account and remove your data from our servers. + account from our servers. diff --git a/apps/v4/examples/base/alert-dialog-destructive.tsx b/apps/v4/examples/base/alert-dialog-destructive.tsx index b622b066f5..3f76f1cd87 100644 --- a/apps/v4/examples/base/alert-dialog-destructive.tsx +++ b/apps/v4/examples/base/alert-dialog-destructive.tsx @@ -31,7 +31,7 @@ export function AlertDialogDestructive() { - Cancel + Cancel Delete diff --git a/apps/v4/examples/base/alert-dialog-in-dialog.tsx b/apps/v4/examples/base/alert-dialog-in-dialog.tsx deleted file mode 100644 index 39a24212c4..0000000000 --- a/apps/v4/examples/base/alert-dialog-in-dialog.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, -} from "@/examples/base/ui/alert-dialog" -import { Button } from "@/examples/base/ui/button" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/examples/base/ui/dialog" - -export function AlertDialogInDialog() { - return ( - <> - - }> - Open Dialog - - - - Alert Dialog Example - - Click the button below to open an alert dialog. - - - - - }> - Open Alert Dialog - - - - Are you absolutely sure? - - This action cannot be undone. This will permanently delete - your account and remove your data from our servers. - - - - Cancel - Continue - - - - - - - - ) -} diff --git a/apps/v4/examples/base/alert-dialog-with-media.tsx b/apps/v4/examples/base/alert-dialog-media.tsx similarity index 67% rename from apps/v4/examples/base/alert-dialog-with-media.tsx rename to apps/v4/examples/base/alert-dialog-media.tsx index b74bd8d2cb..efb0d41fa1 100644 --- a/apps/v4/examples/base/alert-dialog-with-media.tsx +++ b/apps/v4/examples/base/alert-dialog-media.tsx @@ -11,28 +11,27 @@ import { AlertDialogTrigger, } from "@/examples/base/ui/alert-dialog" import { Button } from "@/examples/base/ui/button" -import { BluetoothIcon } from "lucide-react" +import { CircleFadingPlusIcon } from "lucide-react" export function AlertDialogWithMedia() { return ( Default (Media)} + render={} /> - + - Are you absolutely sure? + Share this project? - This will permanently delete your account and remove your data from - our servers. + Anyone with the link will be able to view and edit this project. Cancel - Continue + Share diff --git a/apps/v4/examples/base/alert-dialog-small-with-media.tsx b/apps/v4/examples/base/alert-dialog-small-media.tsx similarity index 94% rename from apps/v4/examples/base/alert-dialog-small-with-media.tsx rename to apps/v4/examples/base/alert-dialog-small-media.tsx index c14e524a1d..8aed89c2b8 100644 --- a/apps/v4/examples/base/alert-dialog-small-with-media.tsx +++ b/apps/v4/examples/base/alert-dialog-small-media.tsx @@ -17,7 +17,7 @@ export function AlertDialogSmallWithMedia() { return ( Small (Media)} + render={} /> diff --git a/apps/v4/examples/base/alert-dialog-small.tsx b/apps/v4/examples/base/alert-dialog-small.tsx index 1718fd5fe5..755b736883 100644 --- a/apps/v4/examples/base/alert-dialog-small.tsx +++ b/apps/v4/examples/base/alert-dialog-small.tsx @@ -14,7 +14,9 @@ import { Button } from "@/examples/base/ui/button" export function AlertDialogSmall() { return ( - Small} /> + Show Dialog} + /> Allow accessory to connect? diff --git a/apps/v4/examples/base/alert-example1.tsx b/apps/v4/examples/base/alert-example1.tsx deleted file mode 100644 index 2b5972a650..0000000000 --- a/apps/v4/examples/base/alert-example1.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" - -export function AlertExample1() { - return ( -
- - Success! Your changes have been saved. - - - Success! Your changes have been saved. - - This is an alert with title and description. - - - - - This one has a description only. No title. No icon. - - -
- ) -} diff --git a/apps/v4/examples/base/alert-example2.tsx b/apps/v4/examples/base/alert-example2.tsx deleted file mode 100644 index 16a82c9151..0000000000 --- a/apps/v4/examples/base/alert-example2.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" -import { CircleAlertIcon } from "lucide-react" - -export function AlertExample2() { - return ( -
- - - - Let's try one with icon, title and a link. - - - - - - This one has an icon and a description only. No title.{" "} - But it has a link and a second link. - - - - - - Success! Your changes have been saved - - This is an alert with icon, title and description. - - - - - - This is a very long alert title that demonstrates how the component - handles extended text content and potentially wraps across multiple - lines - - - - - - This is a very long alert description that demonstrates how the - component handles extended text content and potentially wraps across - multiple lines - - - - - - This is an extremely long alert title that spans multiple lines to - demonstrate how the component handles very lengthy headings while - maintaining readability and proper text wrapping behavior - - - This is an equally long description that contains detailed information - about the alert. It shows how the component can accommodate extensive - content while preserving proper spacing, alignment, and readability - across different screen sizes and viewport widths. This helps ensure - the user experience remains consistent regardless of the content - length. - - -
- ) -} diff --git a/apps/v4/examples/base/alert-example3.tsx b/apps/v4/examples/base/alert-example3.tsx deleted file mode 100644 index 23ae7d7c7c..0000000000 --- a/apps/v4/examples/base/alert-example3.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" -import { CircleAlertIcon } from "lucide-react" - -export function AlertExample3() { - return ( -
- - - Something went wrong! - - Your session has expired. Please log in again. - - - - - Unable to process your payment. - -

- Please verify your billing information and try - again. -

-
    -
  • Check your card details
    • -
  • Ensure sufficient funds
    • -
  • Verify billing address
    • -
- - -
- ) -} diff --git a/apps/v4/examples/base/alert-example4.tsx b/apps/v4/examples/base/alert-example4.tsx deleted file mode 100644 index bc92ef73ef..0000000000 --- a/apps/v4/examples/base/alert-example4.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { - Alert, - AlertAction, - AlertDescription, - AlertTitle, -} from "@/examples/base/ui/alert" -import { Badge } from "@/examples/base/ui/badge" -import { Button } from "@/examples/base/ui/button" -import { CircleAlertIcon } from "lucide-react" - -export function AlertExample4() { - return ( -
- - - The selected emails have been marked as spam. - - - - - - - The selected emails have been marked as spam. - - This is a very long alert title that demonstrates how the component - handles extended text content. - - - Badge - - -
- ) -} diff --git a/apps/v4/examples/base/ui/alert-dialog.tsx b/apps/v4/examples/base/ui/alert-dialog.tsx index ab230c8d25..209c4dbe0a 100644 --- a/apps/v4/examples/base/ui/alert-dialog.tsx +++ b/apps/v4/examples/base/ui/alert-dialog.tsx @@ -116,7 +116,7 @@ function AlertDialogTitle({ + {items.map((item) => ( {item.trigger} diff --git a/apps/v4/examples/radix/accordion-borders.tsx b/apps/v4/examples/radix/accordion-borders.tsx index 2dffb4cec3..3c69833d4d 100644 --- a/apps/v4/examples/radix/accordion-borders.tsx +++ b/apps/v4/examples/radix/accordion-borders.tsx @@ -5,42 +5,45 @@ import { AccordionTrigger, } from "@/examples/radix/ui/accordion" +const items = [ + { + value: "billing", + trigger: "How does billing work?", + content: + "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.", + }, + { + value: "security", + trigger: "Is my data secure?", + content: + "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.", + }, + { + value: "integration", + trigger: "What integrations do you support?", + content: + "We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.", + }, +] + export default function AccordionBorders() { return ( - - - How does billing work? - - We offer monthly and annual subscription plans. Billing is charged at - the beginning of each cycle, and you can cancel anytime. All plans - include automatic backups, 24/7 support, and unlimited team members. - - - - Is my data secure? - - Yes. We use end-to-end encryption, SOC 2 Type II compliance, and - regular third-party security audits. All data is encrypted at rest and - in transit using industry-standard protocols. - - - - What integrations do you support? - - We integrate with 500+ popular tools including Slack, Zapier, - Salesforce, HubSpot, and more. You can also build custom integrations - using our REST API and webhooks. - - + + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} ) } diff --git a/apps/v4/examples/radix/accordion-card.tsx b/apps/v4/examples/radix/accordion-card.tsx index c978eb6724..3dc2e9a33f 100644 --- a/apps/v4/examples/radix/accordion-card.tsx +++ b/apps/v4/examples/radix/accordion-card.tsx @@ -12,47 +12,45 @@ import { CardTitle, } from "@/examples/radix/ui/card" +const items = [ + { + value: "plans", + trigger: "What subscription plans do you offer?", + content: + "We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.", + }, + { + value: "billing", + trigger: "How does billing work?", + content: + "Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.", + }, + { + value: "cancel", + trigger: "How do I cancel my subscription?", + content: + "You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.", + }, +] + export default function AccordionCard() { return ( Subscription & Billing - Common questions about your account, plans, and payments + Common questions about your account, plans, payments and + cancellations. - - - What subscription plans do you offer? - - - We offer three subscription tiers: Starter ($9/month), - Professional ($29/month), and Enterprise ($99/month). Each plan - includes increasing storage limits, API access, priority support, - and team collaboration features. - - - - How does billing work? - - Billing occurs automatically at the start of each billing cycle. - We accept all major credit cards, PayPal, and ACH transfers for - enterprise customers. You'll receive an invoice via email - after each payment. - - - - - How do I cancel my subscription? - - - You can cancel your subscription anytime from your account - settings. There are no cancellation fees or penalties. Your access - will continue until the end of your current billing period. - - + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} diff --git a/apps/v4/examples/radix/accordion-demo.tsx b/apps/v4/examples/radix/accordion-demo.tsx index 368c61a3d9..387daaeee7 100644 --- a/apps/v4/examples/radix/accordion-demo.tsx +++ b/apps/v4/examples/radix/accordion-demo.tsx @@ -10,27 +10,28 @@ export default function AccordionDemo() { - - Is it accessible? + + What are your shipping options? - Yes. It adheres to the WAI-ARIA design pattern. + We offer standard (5-7 days), express (2-3 days), and overnight + shipping. Free shipping on international orders. - - Is it styled? + + What is your return policy? - Yes. It comes with default styles that matches the other - components' aesthetic. + Returns accepted within 30 days. Items must be unused and in original + packaging. Refunds processed within 5-7 business days. - - Is it animated? + + How can I contact customer support? - Yes. It's animated by default, but you can disable it if you - prefer. + Reach us via email, live chat, or phone. We respond within 24 hours + during business days. diff --git a/apps/v4/examples/radix/accordion-in-card.tsx b/apps/v4/examples/radix/accordion-in-card.tsx deleted file mode 100644 index d8705b404f..0000000000 --- a/apps/v4/examples/radix/accordion-in-card.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/examples/radix/ui/accordion" -import { Button } from "@/examples/radix/ui/button" -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/examples/radix/ui/card" -import { ArrowUpRightIcon } from "lucide-react" - -export function AccordionInCard() { - const items = [ - { - value: "plans", - trigger: "What subscription plans do you offer?", - content: ( - <> -

- We offer three subscription tiers: Starter ($9/month), Professional - ($29/month), and Enterprise ($99/month). Each plan includes - increasing storage limits, API access, priority support, and team - collaboration features. -

-

- Annual billing is available with a 20% discount. All - plans include a 14-day free trial with no credit card required. -

- - - ), - }, - { - value: "billing", - trigger: "How does billing work?", - content: ( - <> -

- Billing occurs automatically at the start of each billing cycle. We - accept all major credit cards, PayPal, and ACH transfers for - enterprise customers. -

-

- You'll receive an invoice via email after each payment. You can - update your payment method or billing information anytime in your - account settings. Failed payments will trigger automated retry - attempts and email notifications. -

- - ), - }, - { - value: "upgrade", - trigger: "Can I upgrade or downgrade my plan?", - content: ( - <> -

- Yes, you can change your plan at any time. When upgrading, - you'll be charged a prorated amount for the remainder of your - billing cycle and immediately gain access to new features. -

-

- When downgrading, the change takes effect at the end of your current - billing period, and you'll retain access to premium features - until then. No refunds are provided for downgrades. -

- - ), - }, - { - value: "cancel", - trigger: "How do I cancel my subscription?", - content: ( - <> -

- You can cancel your subscription anytime from your account settings. - There are no cancellation fees or penalties. Your access will - continue until the end of your current billing period. -

-

- After cancellation, your data is retained for 30 days in case you - want to reactivate. You can export all your data before or after - canceling. We'd love to hear your feedback about why - you're leaving. -

- - ), - }, - { - value: "refund", - trigger: "What is your refund policy?", - content: ( - <> -

- We offer a 30-day money-back guarantee for new subscriptions. If - you're not satisfied within the first 30 days, contact our - support team for a full refund. -

-

- After 30 days, we don't provide refunds for partial billing - periods, but you can cancel anytime to avoid future charges. - Enterprise customers have custom refund terms outlined in their - contracts. -

- - ), - }, - ] - - return ( - - - Subscription & Billing - - Common questions about your account, plans, and payments - - - - - {items.map((item) => ( - - {item.trigger} - {item.content} - - ))} - - - - ) -} diff --git a/apps/v4/examples/radix/accordion-multiple.tsx b/apps/v4/examples/radix/accordion-multiple.tsx index 4423500337..8a7fc3dadc 100644 --- a/apps/v4/examples/radix/accordion-multiple.tsx +++ b/apps/v4/examples/radix/accordion-multiple.tsx @@ -5,26 +5,34 @@ import { AccordionTrigger, } from "@/examples/radix/ui/accordion" -export function AccordionMultiple() { - const items = [ - { - value: "item-1", - trigger: - "What are the key considerations when implementing a comprehensive enterprise-level authentication system?", - content: - "Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.", - }, - { - value: "item-2", - trigger: - "How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?", - content: - "Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.", - }, - ] +const items = [ + { + value: "notifications", + trigger: "Notification Settings", + content: + "Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.", + }, + { + value: "privacy", + trigger: "Privacy & Security", + content: + "Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.", + }, + { + value: "billing", + trigger: "Billing & Subscription", + content: + "View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.", + }, +] +export function AccordionMultiple() { return ( - + {items.map((item) => ( {item.trigger} diff --git a/apps/v4/examples/radix/accordion-with-borders.tsx b/apps/v4/examples/radix/accordion-with-borders.tsx deleted file mode 100644 index 0789dd39c3..0000000000 --- a/apps/v4/examples/radix/accordion-with-borders.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/examples/radix/ui/accordion" - -export function AccordionWithBorders() { - const items = [ - { - value: "billing", - trigger: "How does billing work?", - content: - "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.", - }, - { - value: "security", - trigger: "Is my data secure?", - content: - "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.", - }, - { - value: "integration", - trigger: "What integrations do you support?", - content: ( - <> -

- We integrate with 500+ popular tools including Slack, Zapier, - Salesforce, HubSpot, and more. You can also build custom - integrations using our REST API and webhooks.{" "} -

-

- Our API documentation includes code examples in 10+ programming - languages. -

- - ), - }, - ] - - return ( - - {items.map((item) => ( - - - {item.trigger} - - - {item.content} - - - ))} - - ) -} diff --git a/apps/v4/examples/radix/accordion-with-disabled.tsx b/apps/v4/examples/radix/accordion-with-disabled.tsx deleted file mode 100644 index f6079ffc97..0000000000 --- a/apps/v4/examples/radix/accordion-with-disabled.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/examples/radix/ui/accordion" - -export function AccordionWithDisabled() { - const items = [ - { - value: "item-1", - trigger: "Can I access my account history?", - content: - "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.", - disabled: false, - }, - { - value: "item-2", - trigger: "Premium feature information", - content: - "This section contains information about premium features. Upgrade your plan to access this content.", - disabled: true, - }, - { - value: "item-3", - trigger: "How do I update my email address?", - content: - "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.", - disabled: false, - }, - ] - - return ( - - {items.map((item) => ( - - - {item.trigger} - - - {item.content} - - - ))} - - ) -} diff --git a/apps/v4/examples/radix/alert-action.tsx b/apps/v4/examples/radix/alert-action.tsx new file mode 100644 index 0000000000..c2a754f2c6 --- /dev/null +++ b/apps/v4/examples/radix/alert-action.tsx @@ -0,0 +1,23 @@ +import { + Alert, + AlertAction, + AlertDescription, + AlertTitle, +} from "@/examples/radix/ui/alert" +import { Button } from "@/examples/radix/ui/button" + +export default function AlertActionExample() { + return ( + + Dark mode is now available + + Enable it under your profile settings to get started. + + + + + + ) +} diff --git a/apps/v4/examples/radix/alert-basic.tsx b/apps/v4/examples/radix/alert-basic.tsx new file mode 100644 index 0000000000..ba00c11e78 --- /dev/null +++ b/apps/v4/examples/radix/alert-basic.tsx @@ -0,0 +1,15 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert" +import { CheckCircle2Icon } from "lucide-react" + +export default function AlertBasic() { + return ( + + + Account updated successfully + + Your profile information has been saved. Changes will be reflected + immediately. + + + ) +} diff --git a/apps/v4/examples/radix/alert-colors.tsx b/apps/v4/examples/radix/alert-colors.tsx new file mode 100644 index 0000000000..04494b1c6c --- /dev/null +++ b/apps/v4/examples/radix/alert-colors.tsx @@ -0,0 +1,15 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert" +import { AlertTriangleIcon } from "lucide-react" + +export default function AlertColors() { + return ( + + + Your subscription will expire in 3 days. + + Renew now to avoid service interruption or upgrade to a paid plan to + continue using the service. + + + ) +} diff --git a/apps/v4/examples/radix/alert-demo.tsx b/apps/v4/examples/radix/alert-demo.tsx index 5a659c4230..0e1ab23fb0 100644 --- a/apps/v4/examples/radix/alert-demo.tsx +++ b/apps/v4/examples/radix/alert-demo.tsx @@ -1,32 +1,23 @@ import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert" -import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react" +import { CheckCircle2Icon, InfoIcon } from "lucide-react" export default function AlertDemo() { return ( -
+
- Success! Your changes have been saved + Payment successful - This is an alert with icon, title and description. + Your payment of $29.99 has been processed. A receipt has been sent to + your email address. - - - This Alert has a title and an icon. No description. - - - - - Unable to process your payment. + + New feature available -

Please verify your billing information and try again.

-
    -
  • Check your card details
    • -
  • Ensure sufficient funds
    • -
  • Verify billing address
    • -
+ We've added dark mode support. You can enable it in your account + settings.
diff --git a/apps/v4/examples/radix/alert-destructive.tsx b/apps/v4/examples/radix/alert-destructive.tsx index 77bf3c74fa..6a4226dbce 100644 --- a/apps/v4/examples/radix/alert-destructive.tsx +++ b/apps/v4/examples/radix/alert-destructive.tsx @@ -3,11 +3,12 @@ import { AlertCircleIcon } from "lucide-react" export default function AlertDestructive() { return ( - + - Error + Payment failed - Your session has expired. Please log in again. + Your payment could not be processed. Please check your payment method + and try again. ) diff --git a/apps/v4/examples/radix/alert-dialog-basic.tsx b/apps/v4/examples/radix/alert-dialog-basic.tsx index 73bed568f2..4dc197f4ce 100644 --- a/apps/v4/examples/radix/alert-dialog-basic.tsx +++ b/apps/v4/examples/radix/alert-dialog-basic.tsx @@ -15,7 +15,7 @@ export function AlertDialogBasic() { return ( - + diff --git a/apps/v4/examples/radix/alert-dialog-demo.tsx b/apps/v4/examples/radix/alert-dialog-demo.tsx index 1920d204bb..8838427d4d 100644 --- a/apps/v4/examples/radix/alert-dialog-demo.tsx +++ b/apps/v4/examples/radix/alert-dialog-demo.tsx @@ -22,7 +22,7 @@ export default function AlertDialogDemo() { Are you absolutely sure? This action cannot be undone. This will permanently delete your - account and remove your data from our servers. + account from our servers. diff --git a/apps/v4/examples/radix/alert-dialog-destructive.tsx b/apps/v4/examples/radix/alert-dialog-destructive.tsx index a317ed20a7..f7a89b4bf2 100644 --- a/apps/v4/examples/radix/alert-dialog-destructive.tsx +++ b/apps/v4/examples/radix/alert-dialog-destructive.tsx @@ -31,7 +31,7 @@ export function AlertDialogDestructive() { - Cancel + Cancel Delete diff --git a/apps/v4/examples/radix/alert-dialog-in-dialog.tsx b/apps/v4/examples/radix/alert-dialog-in-dialog.tsx deleted file mode 100644 index 0ab94cbd01..0000000000 --- a/apps/v4/examples/radix/alert-dialog-in-dialog.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, -} from "@/examples/radix/ui/alert-dialog" -import { Button } from "@/examples/radix/ui/button" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/examples/radix/ui/dialog" - -export function AlertDialogInDialog() { - return ( - - - - - - - Alert Dialog Example - - Click the button below to open an alert dialog. - - - - - - - - - - Are you absolutely sure? - - This action cannot be undone. This will permanently delete - your account and remove your data from our servers. - - - - Cancel - Continue - - - - - - - ) -} diff --git a/apps/v4/examples/radix/alert-dialog-with-media.tsx b/apps/v4/examples/radix/alert-dialog-media.tsx similarity index 69% rename from apps/v4/examples/radix/alert-dialog-with-media.tsx rename to apps/v4/examples/radix/alert-dialog-media.tsx index ad9496cf6c..8c2a71131d 100644 --- a/apps/v4/examples/radix/alert-dialog-with-media.tsx +++ b/apps/v4/examples/radix/alert-dialog-media.tsx @@ -11,28 +11,27 @@ import { AlertDialogTrigger, } from "@/examples/radix/ui/alert-dialog" import { Button } from "@/examples/radix/ui/button" -import { BluetoothIcon } from "lucide-react" +import { CircleFadingPlusIcon } from "lucide-react" export function AlertDialogWithMedia() { return ( - + - + - Are you absolutely sure? + Share this project? - This will permanently delete your account and remove your data from - our servers. + Anyone with the link will be able to view and edit this project. Cancel - Continue + Share diff --git a/apps/v4/examples/radix/alert-dialog-small-with-media.tsx b/apps/v4/examples/radix/alert-dialog-small-media.tsx similarity index 95% rename from apps/v4/examples/radix/alert-dialog-small-with-media.tsx rename to apps/v4/examples/radix/alert-dialog-small-media.tsx index 894c5f340c..10f73f83b5 100644 --- a/apps/v4/examples/radix/alert-dialog-small-with-media.tsx +++ b/apps/v4/examples/radix/alert-dialog-small-media.tsx @@ -17,8 +17,9 @@ export function AlertDialogSmallWithMedia() { return ( - + + diff --git a/apps/v4/examples/radix/alert-dialog-small.tsx b/apps/v4/examples/radix/alert-dialog-small.tsx index 481d24e399..14a1ee64f8 100644 --- a/apps/v4/examples/radix/alert-dialog-small.tsx +++ b/apps/v4/examples/radix/alert-dialog-small.tsx @@ -15,7 +15,7 @@ export function AlertDialogSmall() { return ( - + diff --git a/apps/v4/examples/radix/alert-example1.tsx b/apps/v4/examples/radix/alert-example1.tsx deleted file mode 100644 index d991c1ab57..0000000000 --- a/apps/v4/examples/radix/alert-example1.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert" - -export function AlertExample1() { - return ( -
- - Success! Your changes have been saved. - - - Success! Your changes have been saved. - - This is an alert with title and description. - - - - - This one has a description only. No title. No icon. - - -
- ) -} diff --git a/apps/v4/examples/radix/alert-example2.tsx b/apps/v4/examples/radix/alert-example2.tsx deleted file mode 100644 index 105b176a5e..0000000000 --- a/apps/v4/examples/radix/alert-example2.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert" -import { CircleAlertIcon } from "lucide-react" - -export function AlertExample2() { - return ( -
- - - - Let's try one with icon, title and a link. - - - - - - This one has an icon and a description only. No title.{" "} - But it has a link and a second link. - - - - - - Success! Your changes have been saved - - This is an alert with icon, title and description. - - - - - - This is a very long alert title that demonstrates how the component - handles extended text content and potentially wraps across multiple - lines - - - - - - This is a very long alert description that demonstrates how the - component handles extended text content and potentially wraps across - multiple lines - - - - - - This is an extremely long alert title that spans multiple lines to - demonstrate how the component handles very lengthy headings while - maintaining readability and proper text wrapping behavior - - - This is an equally long description that contains detailed information - about the alert. It shows how the component can accommodate extensive - content while preserving proper spacing, alignment, and readability - across different screen sizes and viewport widths. This helps ensure - the user experience remains consistent regardless of the content - length. - - -
- ) -} diff --git a/apps/v4/examples/radix/alert-example3.tsx b/apps/v4/examples/radix/alert-example3.tsx deleted file mode 100644 index c47e5fae4f..0000000000 --- a/apps/v4/examples/radix/alert-example3.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert" -import { CircleAlertIcon } from "lucide-react" - -export function AlertExample3() { - return ( -
- - - Something went wrong! - - Your session has expired. Please log in again. - - - - - Unable to process your payment. - -

- Please verify your billing information and try - again. -

-
    -
  • Check your card details
    • -
  • Ensure sufficient funds
    • -
  • Verify billing address
    • -
- - -
- ) -} diff --git a/apps/v4/examples/radix/alert-example4.tsx b/apps/v4/examples/radix/alert-example4.tsx deleted file mode 100644 index 015bdc77b6..0000000000 --- a/apps/v4/examples/radix/alert-example4.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { - Alert, - AlertAction, - AlertDescription, - AlertTitle, -} from "@/examples/radix/ui/alert" -import { Badge } from "@/examples/radix/ui/badge" -import { Button } from "@/examples/radix/ui/button" -import { CircleAlertIcon } from "lucide-react" - -export function AlertExample4() { - return ( -
- - - The selected emails have been marked as spam. - - - - - - - The selected emails have been marked as spam. - - This is a very long alert title that demonstrates how the component - handles extended text content. - - - Badge - - -
- ) -} diff --git a/apps/v4/examples/radix/ui/alert-dialog.tsx b/apps/v4/examples/radix/ui/alert-dialog.tsx index 39c1a40e76..25edfba285 100644 --- a/apps/v4/examples/radix/ui/alert-dialog.tsx +++ b/apps/v4/examples/radix/ui/alert-dialog.tsx @@ -122,7 +122,7 @@ function AlertDialogTitle({ { try { - const component = Index[style]?.[name] - if (!component?.files) { - return match + // Try to extract styleName from the match. + const styleNameMatch = match.match(/styleName="([^"]+)"/) + const effectiveStyle = styleNameMatch ? styleNameMatch[1] : style + + let src = getDemoFilePath(name, effectiveStyle) + + if (!src) { + const { index, key } = getIndexForStyle(effectiveStyle) + const component = index[key]?.[name] + if (!component?.files) { + return match + } + src = component.files[0]?.path } - const src = component.files[0]?.path if (!src) { return match } let source = fs.readFileSync(src, "utf8") - source = source.replaceAll(`@/registry/new-york-v4/`, "@/components/") + + // Replace all base-specific paths. + for (const base of BASES) { + source = source.replaceAll( + `@/registry/bases/${base.name}/`, + "@/components/" + ) + source = source.replaceAll( + `@/examples/${base.name}/ui/`, + "@/components/ui/" + ) + source = source.replaceAll(`@/examples/${base.name}/lib/`, "@/lib/") + source = source.replaceAll(`@/examples/${base.name}/hooks/`, "@/hooks/") + } + source = source.replaceAll( + `@/registry/${effectiveStyle}/`, + "@/components/" + ) source = source.replaceAll("export default", "export") return `\`\`\`tsx diff --git a/apps/v4/mdx-components.tsx b/apps/v4/mdx-components.tsx index 44c9905b9d..5b176e3afd 100644 --- a/apps/v4/mdx-components.tsx +++ b/apps/v4/mdx-components.tsx @@ -285,9 +285,12 @@ export const mdxComponents = { {...props} /> ), - Steps: ({ ...props }) => ( + Steps: ({ className, ...props }: React.ComponentProps<"div">) => (
h3]:step steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8", + className + )} {...props} /> ), diff --git a/apps/v4/public/r/styles/base-lyra/example.json b/apps/v4/public/r/styles/base-lyra/example.json index b05ca6f871..6e37db54a9 100644 --- a/apps/v4/public/r/styles/base-lyra/example.json +++ b/apps/v4/public/r/styles/base-lyra/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/base-lyra/components/example.tsx", - "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n
\n
\n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n
\n
\n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-maia/example.json b/apps/v4/public/r/styles/base-maia/example.json index f608c46035..45f4770ced 100644 --- a/apps/v4/public/r/styles/base-maia/example.json +++ b/apps/v4/public/r/styles/base-maia/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/base-maia/components/example.tsx", - "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n
\n
\n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n
\n
\n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-mira/example.json b/apps/v4/public/r/styles/base-mira/example.json index 98ec86ae98..3ba342b8f0 100644 --- a/apps/v4/public/r/styles/base-mira/example.json +++ b/apps/v4/public/r/styles/base-mira/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/base-mira/components/example.tsx", - "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n
\n
\n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n
\n
\n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-nova/alert-dialog.json b/apps/v4/public/r/styles/base-nova/alert-dialog.json index f564a0fb2d..596773c425 100644 --- a/apps/v4/public/r/styles/base-nova/alert-dialog.json +++ b/apps/v4/public/r/styles/base-nova/alert-dialog.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-nova/ui/alert-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-nova/example.json b/apps/v4/public/r/styles/base-nova/example.json index 125ec82ec3..05ae7b15e3 100644 --- a/apps/v4/public/r/styles/base-nova/example.json +++ b/apps/v4/public/r/styles/base-nova/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/base-nova/components/example.tsx", - "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n
\n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-vega/example.json b/apps/v4/public/r/styles/base-vega/example.json index 9e60fc1045..bbb5c91582 100644 --- a/apps/v4/public/r/styles/base-vega/example.json +++ b/apps/v4/public/r/styles/base-vega/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/base-vega/components/example.tsx", - "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/example.json b/apps/v4/public/r/styles/radix-lyra/example.json index 15e807fa55..70d4a142ee 100644 --- a/apps/v4/public/r/styles/radix-lyra/example.json +++ b/apps/v4/public/r/styles/radix-lyra/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/radix-lyra/components/example.tsx", - "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-maia/example.json b/apps/v4/public/r/styles/radix-maia/example.json index 7bea69bd57..7c706b7163 100644 --- a/apps/v4/public/r/styles/radix-maia/example.json +++ b/apps/v4/public/r/styles/radix-maia/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/radix-maia/components/example.tsx", - "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-mira/example.json b/apps/v4/public/r/styles/radix-mira/example.json index f864710b39..0002500a19 100644 --- a/apps/v4/public/r/styles/radix-mira/example.json +++ b/apps/v4/public/r/styles/radix-mira/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/radix-mira/components/example.tsx", - "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-nova/alert-dialog.json b/apps/v4/public/r/styles/radix-nova/alert-dialog.json index 1267efa335..0d199d8b7d 100644 --- a/apps/v4/public/r/styles/radix-nova/alert-dialog.json +++ b/apps/v4/public/r/styles/radix-nova/alert-dialog.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-nova/ui/alert-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-nova/example.json b/apps/v4/public/r/styles/radix-nova/example.json index fb13f48ccb..5521c36175 100644 --- a/apps/v4/public/r/styles/radix-nova/example.json +++ b/apps/v4/public/r/styles/radix-nova/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/radix-nova/components/example.tsx", - "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-vega/example.json b/apps/v4/public/r/styles/radix-vega/example.json index 14bb073125..adf6d6ef20 100644 --- a/apps/v4/public/r/styles/radix-vega/example.json +++ b/apps/v4/public/r/styles/radix-vega/example.json @@ -5,7 +5,7 @@ "files": [ { "path": "registry/radix-vega/components/example.tsx", - "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title: string\n containerClassName?: string\n}) {\n return (\n \n
\n {title}\n
\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", + "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nfunction Example({\n title,\n children,\n className,\n containerClassName,\n ...props\n}: React.ComponentProps<\"div\"> & {\n title?: string\n containerClassName?: string\n}) {\n return (\n \n {title && (\n
\n {title}\n
\n )}\n \n {children}\n \n \n )\n}\n\nexport { ExampleWrapper, Example }\n", "type": "registry:component" } ], diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css index c1c96e92a5..674f9ab338 100644 --- a/apps/v4/registry/styles/style-nova.css +++ b/apps/v4/registry/styles/style-nova.css @@ -59,7 +59,7 @@ } .cn-alert-dialog-title { - @apply text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2; + @apply text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2; } .cn-alert-dialog-description { diff --git a/apps/v4/styles/globals.css b/apps/v4/styles/globals.css index 1e41b5b27b..fbf92d6ca6 100644 --- a/apps/v4/styles/globals.css +++ b/apps/v4/styles/globals.css @@ -249,7 +249,7 @@ } > h3 { - @apply !mt-16; + @apply !mt-8; } > h3 + p {