create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/select-box.tsx

@@ -1,98 +1,98 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { SelectOption } from 'nextjs-cms/core/fields'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export default function SelectBox({
-    items,
-    defaultValue,
-    onChange = () => {},
-    classname,
-}: {
-    items: SelectOption[]
-    defaultValue?: string | number | undefined
-    onChange: any
-    classname: string
-}) {
-    const t = useI18n()
-    const [selected, setSelected] = useState<SelectOption | undefined>(
-        defaultValue !== undefined && defaultValue !== null
-            ? items.find((item) => item.value?.toString() === defaultValue.toString())
-            : items[0],
-    )
-    const [open, setOpen] = useState(false)
-
-    // Update selected item when items or defaultValue changes (e.g., on language change)
-    useEffect(() => {
-        if (defaultValue !== undefined && defaultValue !== null) {
-            const foundItem = items.find((item) => item.value?.toString() === defaultValue.toString())
-            if (foundItem) {
-                setSelected(foundItem)
-            }
-        } else {
-            // If no value is selected, update to the first item (placeholder)
-            // This ensures the placeholder label is updated when language changes
-            setSelected(items[0])
-        }
-    }, [items, defaultValue])
-
-    return (
-        <div className={cn('relative', classname)}>
-            <Popover open={open} onOpenChange={setOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        variant='outline'
-                        role='combobox'
-                        aria-expanded={open}
-                        className='bg-input text-foreground w-full justify-between rounded px-1 py-5 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden sm:text-sm sm:leading-6'
-                    >
-                        <span className='block truncate'>{selected?.label ? selected.label : ''}</span>
-                        <ChevronsUpDown className='size-5 opacity-50' />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                    className='border-foreground/50 w-[var(--radix-popover-trigger-width)] border p-0 shadow-sm'
-                    align='start'
-                >
-                    <Command>
-                        <CommandInput placeholder={t('searchDots') as string} className='h-9' />
-                        <CommandList>
-                            <CommandEmpty>{t('noItemFound')}</CommandEmpty>
-                            <CommandGroup>
-                                {items.map((item: SelectOption, index: number) => {
-                                    // Use label for searchable value, but include value in a way that we can identify it
-                                    // cmdk filters by both value prop and text content, so we use label for value to make search work
-                                    const searchableValue = item.label
-                                    const isSelected = selected && item.value && selected.value === item.value
-                                    return (
-                                        <CommandItem
-                                            key={`${item.label}-${index}`}
-                                            value={searchableValue}
-                                            keywords={[item.label]}
-                                            onSelect={() => {
-                                                setSelected(item)
-                                                onChange(item)
-                                                setOpen(false)
-                                            }}
-                                        >
-                                            <span className={isSelected ? 'font-extrabold' : 'text-foreground'}>
-                                                {item.label}
-                                            </span>
-                                            {isSelected ? <Check strokeWidth={5} size={25} color='green' /> : null}
-                                        </CommandItem>
-                                    )
-                                })}
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
-        </div>
-    )
-}
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { SelectOption } from 'nextjs-cms/core/fields'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export default function SelectBox({
+    items,
+    defaultValue,
+    onChange = () => {},
+    classname,
+}: {
+    items: SelectOption[]
+    defaultValue?: string | number | undefined
+    onChange: any
+    classname: string
+}) {
+    const t = useI18n()
+    const [selected, setSelected] = useState<SelectOption | undefined>(
+        defaultValue !== undefined && defaultValue !== null
+            ? items.find((item) => item.value?.toString() === defaultValue.toString())
+            : items[0],
+    )
+    const [open, setOpen] = useState(false)
+
+    // Update selected item when items or defaultValue changes (e.g., on language change)
+    useEffect(() => {
+        if (defaultValue !== undefined && defaultValue !== null) {
+            const foundItem = items.find((item) => item.value?.toString() === defaultValue.toString())
+            if (foundItem) {
+                setSelected(foundItem)
+            }
+        } else {
+            // If no value is selected, update to the first item (placeholder)
+            // This ensures the placeholder label is updated when language changes
+            setSelected(items[0])
+        }
+    }, [items, defaultValue])
+
+    return (
+        <div className={cn('relative', classname)}>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant='outline'
+                        role='combobox'
+                        aria-expanded={open}
+                        className='bg-input text-foreground w-full justify-between rounded px-1 py-5 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden sm:text-sm sm:leading-6'
+                    >
+                        <span className='block truncate'>{selected?.label ? selected.label : ''}</span>
+                        <ChevronsUpDown className='size-5 opacity-50' />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className='border-foreground/50 w-[var(--radix-popover-trigger-width)] border p-0 shadow-sm'
+                    align='start'
+                >
+                    <Command>
+                        <CommandInput placeholder={t('searchDots') as string} className='h-9' />
+                        <CommandList>
+                            <CommandEmpty>{t('noItemFound')}</CommandEmpty>
+                            <CommandGroup>
+                                {items.map((item: SelectOption, index: number) => {
+                                    // Use label for searchable value, but include value in a way that we can identify it
+                                    // cmdk filters by both value prop and text content, so we use label for value to make search work
+                                    const searchableValue = item.label
+                                    const isSelected = selected && item.value && selected.value === item.value
+                                    return (
+                                        <CommandItem
+                                            key={`${item.label}-${index}`}
+                                            value={searchableValue}
+                                            keywords={[item.label]}
+                                            onSelect={() => {
+                                                setSelected(item)
+                                                onChange(item)
+                                                setOpen(false)
+                                            }}
+                                        >
+                                            <span className={isSelected ? 'font-extrabold' : 'text-foreground'}>
+                                                {item.label}
+                                            </span>
+                                            {isSelected ? <Check strokeWidth={5} size={25} color='green' /> : null}
+                                        </CommandItem>
+                                    )
+                                })}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}

package/templates/default/components/ui/accordion.tsx

@@ -1,53 +1,53 @@
-'use client'
-
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-
-import { cn } from '@/lib/utils'
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-    <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-))
-AccordionItem.displayName = 'AccordionItem'
-
-const AccordionTrigger = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-    <AccordionPrimitive.Header className='flex'>
-        <AccordionPrimitive.Trigger
-            ref={ref}
-            className={cn(
-                'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-                className,
-            )}
-            {...props}
-        >
-            {children}
-            <ChevronDownIcon className='text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200' />
-        </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-    <AccordionPrimitive.Content
-        ref={ref}
-        className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
-        {...props}
-    >
-        <div className={cn('pt-0 pb-4', className)}>{children}</div>
-    </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className='flex'>
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDownIcon className='text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200' />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
+        {...props}
+    >
+        <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/templates/default/components/ui/alert-dialog.tsx

@@ -1,113 +1,113 @@
-'use client'
-
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-
-function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-    return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />
-}
-
-function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-    return <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
-}
-
-function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-    return <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
-}
-
-function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-    return (
-        <AlertDialogPrimitive.Overlay
-            data-slot='alert-dialog-overlay'
-            className={cn(
-                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-                className,
-            )}
-            {...props}
-        />
-    )
-}
-
-function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-    return (
-        <AlertDialogPortal>
-            <AlertDialogOverlay />
-            <AlertDialogPrimitive.Content
-                data-slot='alert-dialog-content'
-                className={cn(
-                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg rtl:-translate-x-[-50%]',
-                    className,
-                )}
-                {...props}
-            />
-        </AlertDialogPortal>
-    )
-}
-
-function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot='alert-dialog-header'
-            className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
-            {...props}
-        />
-    )
-}
-
-function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-    return (
-        <div
-            data-slot='alert-dialog-footer'
-            className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-            {...props}
-        />
-    )
-}
-
-function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-    return (
-        <AlertDialogPrimitive.Title
-            data-slot='alert-dialog-title'
-            className={cn('text-lg font-semibold', className)}
-            {...props}
-        />
-    )
-}
-
-function AlertDialogDescription({
-    className,
-    ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-    return (
-        <AlertDialogPrimitive.Description
-            data-slot='alert-dialog-description'
-            className={cn('text-muted-foreground text-sm', className)}
-            {...props}
-        />
-    )
-}
-
-function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-    return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
-}
-
-function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-    return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline' }), className)} {...props} />
-}
-
-export {
-    AlertDialog,
-    AlertDialogPortal,
-    AlertDialogOverlay,
-    AlertDialogTrigger,
-    AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogFooter,
-    AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogAction,
-    AlertDialogCancel,
-}
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+    return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+    return <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+    return <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
+}
+
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+    return (
+        <AlertDialogPrimitive.Overlay
+            data-slot='alert-dialog-overlay'
+            className={cn(
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+                className,
+            )}
+            {...props}
+        />
+    )
+}
+
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Content
+                data-slot='alert-dialog-content'
+                className={cn(
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg rtl:-translate-x-[-50%]',
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    )
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot='alert-dialog-header'
+            className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
+            {...props}
+        />
+    )
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot='alert-dialog-footer'
+            className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+            {...props}
+        />
+    )
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return (
+        <AlertDialogPrimitive.Title
+            data-slot='alert-dialog-title'
+            className={cn('text-lg font-semibold', className)}
+            {...props}
+        />
+    )
+}
+
+function AlertDialogDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+    return (
+        <AlertDialogPrimitive.Description
+            data-slot='alert-dialog-description'
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    )
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+    return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
+}
+
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+    return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline' }), className)} {...props} />
+}
+
+export {
+    AlertDialog,
+    AlertDialogPortal,
+    AlertDialogOverlay,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogAction,
+    AlertDialogCancel,
+}

package/templates/default/components/ui/alert.tsx

@@ -1,47 +1,47 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const alertVariants = cva(
-    'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7',
-    {
-        variants: {
-            variant: {
-                default: 'bg-background text-foreground',
-                destructive:
-                    'border-destructive/90 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive',
-                light: 'bg-gray-100 text-gray-900 dark:bg-gray-950 dark:text-gray-100',
-                info: 'border-info bg-info/10 text-info-foreground [&>svg]:text-info',
-                warning: 'bg-warning text-warning dark:bg-warning dark:text-warning',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    },
-)
-
-const Alert = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-    <div ref={ref} role='alert' className={cn(alertVariants({ variant }), className)} {...props} />
-))
-Alert.displayName = 'Alert'
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h5 ref={ref} className={cn('mb-1 leading-none font-medium tracking-tight', className)} {...props} />
-    ),
-)
-AlertTitle.displayName = 'AlertTitle'
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-    ),
-)
-AlertDescription.displayName = 'AlertDescription'
-
-export { Alert, AlertTitle, AlertDescription }
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+    'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7',
+    {
+        variants: {
+            variant: {
+                default: 'bg-background text-foreground',
+                destructive:
+                    'border-destructive/90 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive',
+                light: 'bg-gray-100 text-gray-900 dark:bg-gray-950 dark:text-gray-100',
+                info: 'border-info bg-info/10 text-info-foreground [&>svg]:text-info',
+                warning: 'bg-warning text-warning dark:bg-warning dark:text-warning',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+)
+
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div ref={ref} role='alert' className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+    ({ className, ...props }, ref) => (
+        <h5 ref={ref} className={cn('mb-1 leading-none font-medium tracking-tight', className)} {...props} />
+    ),
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+    ),
+)
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }