[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" "use client" import * as React from "react" import { Accordion as AccordionPrimitive } from "radix-ui" import { cn } from '@/lib/utils' import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" function Accordion({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from '@/lib/utils' const alertVariants = cva("grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", { variants: { variant: { default: "bg-card text-card-foreground", destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current", }, }, defaultVariants: { variant: "default", }, }) function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { return (

svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className )} {...props} /> ) } function AlertDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Alert, AlertTitle, AlertDescription, AlertAction } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" "use client" import * as React from "react" import { AlertDialog as AlertDialogPrimitive } from "radix-ui" import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, size = "default", ...props }: React.ComponentProps & { size?: "default" | "sm" }) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, variant = "default", size = "default", ...props }: React.ComponentProps & Pick, "variant" | "size">) { return ( ) } function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }: React.ComponentProps & Pick, "variant" | "size">) { return ( ) } export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" "use client" import { AspectRatio as AspectRatioPrimitive } from "radix-ui" function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import { Avatar as AvatarPrimitive } from "radix-ui" import { cn } from '@/lib/utils' function Avatar({ className, size = "default", ...props }: React.ComponentProps & { size?: "default" | "sm" | "lg" }) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) { return ( svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className )} {...props} /> ) } function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) { return (

svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)} {...props} /> ) } export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from '@/lib/utils' const badgeVariants = cva( "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from "react" import { Slot } from "radix-ui" import { cn } from '@/lib/utils' import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react" function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return (

) } function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "a" return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return (
svg]:size-3.5", className)} {...props} > {children ?? ( )}

& { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/button-group.tsx" isMerged="true" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from '@/lib/utils' import { Separator } from '@/components/ui/separator' const buttonGroupVariants = cva( "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", { variants: { orientation: { horizontal: "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none", vertical: "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none", }, }, defaultVariants: { orientation: "horizontal", }, } ) function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<"div"> & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "div" return ( ) } function ButtonGroupSeparator({ className, orientation = "vertical", ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" "use client" import * as React from "react" import { DayPicker, getDefaultClassNames, type DayButton, type Locale, } from "react-day-picker" import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react" function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps["variant"] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className )} captionLayout={captionLayout} locale={locale} formatters={{ formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }), ...formatters, }} classNames={{ root: cn("w-fit", defaultClassNames.root), months: cn( "flex gap-4 flex-col md:flex-row relative", defaultClassNames.months ), month: cn("flex flex-col w-full gap-4", defaultClassNames.month), nav: cn( "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav ), button_previous: cn( buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous ), button_next: cn( buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next ), month_caption: cn( "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption ), dropdowns: cn( "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns ), dropdown_root: cn( "relative cn-calendar-dropdown-root rounded-(--cell-radius)", defaultClassNames.dropdown_root ), dropdown: cn( "absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown ), caption_label: cn( "select-none font-medium", captionLayout === "label" ? "text-sm" : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label ), table: "w-full border-collapse", weekdays: cn("flex", defaultClassNames.weekdays), weekday: cn( "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday ), week: cn("flex w-full mt-2", defaultClassNames.week), week_number_header: cn( "select-none w-(--cell-size)", defaultClassNames.week_number_header ), week_number: cn( "text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number ), day: cn( "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day ), range_start: cn( "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate", defaultClassNames.range_start ), range_middle: cn("rounded-none", defaultClassNames.range_middle), range_end: cn( "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate", defaultClassNames.range_end ), today: cn( "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none", defaultClassNames.today ), outside: cn( "text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside ), disabled: cn( "text-muted-foreground opacity-50", defaultClassNames.disabled ), hidden: cn("invisible", defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === "left") { return ( ) } if (orientation === "right") { return ( ) } return ( ) }, DayButton: ({ ...props }) => ( ), WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps & { locale?: Partial }) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (

{children}

) } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (