create-nextjs-cms 0.9.30 → 0.9.31

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

@@ -1,38 +1,38 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const badgeVariants = cva(
-    'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>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 transition-[color,box-shadow] overflow-hidden',
-    {
-        variants: {
-            variant: {
-                default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-                primary: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-                secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-                success: 'border-transparent bg-green-500 text-white [a&]:hover:bg-green-600',
-                destructive:
-                    'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-                outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    },
-)
-
-function Badge({
-    className,
-    variant,
-    asChild = false,
-    ...props
-}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-    const Comp = asChild ? Slot : 'span'
-
-    return <Comp data-slot='badge' className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+    'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>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 transition-[color,box-shadow] overflow-hidden',
+    {
+        variants: {
+            variant: {
+                default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+                primary: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+                secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+                success: 'border-transparent bg-green-500 text-white [a&]:hover:bg-green-600',
+                destructive:
+                    'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+                outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+)
+
+function Badge({
+    className,
+    variant,
+    asChild = false,
+    ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+    const Comp = asChild ? Slot : 'span'
+
+    return <Comp data-slot='badge' className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

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

@@ -1,43 +1,43 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)} {...props} />
-))
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-    ),
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h3 ref={ref} className={cn('leading-none font-semibold tracking-tight', className)} {...props} />
-    ),
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-    ({ className, ...props }, ref) => (
-        <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
-    ),
-)
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
-)
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-    ),
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)} {...props} />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+    ({ className, ...props }, ref) => (
+        <h3 ref={ref} className={cn('leading-none font-semibold tracking-tight', className)} {...props} />
+    ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, ...props }, ref) => (
+        <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+    ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+    ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

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

@@ -1,137 +1,137 @@
-'use client'
-
-import * as React from 'react'
-import { Command as CommandPrimitive } from 'cmdk'
-import { SearchIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-    return (
-        <CommandPrimitive
-            data-slot='command'
-            className={cn(
-                'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
-                className,
-            )}
-            {...props}
-        />
-    )
-}
-
-function CommandDialog({
-    title = 'Command Palette',
-    description = 'Search for a command to run...',
-    children,
-    className,
-    showCloseButton = true,
-    ...props
-}: React.ComponentProps<typeof Dialog> & {
-    title?: string
-    description?: string
-    className?: string
-    showCloseButton?: boolean
-}) {
-    return (
-        <Dialog {...props}>
-            <DialogHeader className='sr-only'>
-                <DialogTitle>{title}</DialogTitle>
-                <DialogDescription>{description}</DialogDescription>
-            </DialogHeader>
-            <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
-                <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
-                    {children}
-                </Command>
-            </DialogContent>
-        </Dialog>
-    )
-}
-
-function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
-    return (
-        <div data-slot='command-input-wrapper' className='flex h-9 items-center gap-2 border-b px-3'>
-            <SearchIcon className='size-4 shrink-0 opacity-50' />
-            <CommandPrimitive.Input
-                data-slot='command-input'
-                className={cn(
-                    'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-                    className,
-                )}
-                {...props}
-            />
-        </div>
-    )
-}
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-    return (
-        <CommandPrimitive.List
-            data-slot='command-list'
-            className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
-            {...props}
-        />
-    )
-}
-
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-    return <CommandPrimitive.Empty data-slot='command-empty' className='py-6 text-center text-sm' {...props} />
-}
-
-function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
-    return (
-        <CommandPrimitive.Group
-            data-slot='command-group'
-            className={cn(
-                'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
-                className,
-            )}
-            {...props}
-        />
-    )
-}
-
-function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-    return (
-        <CommandPrimitive.Separator
-            data-slot='command-separator'
-            className={cn('bg-border -mx-1 h-px', className)}
-            {...props}
-        />
-    )
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-    return (
-        <CommandPrimitive.Item
-            data-slot='command-item'
-            className={cn(
-                "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-                className,
-            )}
-            {...props}
-        />
-    )
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-    return (
-        <span
-            data-slot='command-shortcut'
-            className={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
-            {...props}
-        />
-    )
-}
-
-export {
-    Command,
-    CommandDialog,
-    CommandInput,
-    CommandList,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandShortcut,
-    CommandSeparator,
-}
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+    return (
+        <CommandPrimitive
+            data-slot='command'
+            className={cn(
+                'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+                className,
+            )}
+            {...props}
+        />
+    )
+}
+
+function CommandDialog({
+    title = 'Command Palette',
+    description = 'Search for a command to run...',
+    children,
+    className,
+    showCloseButton = true,
+    ...props
+}: React.ComponentProps<typeof Dialog> & {
+    title?: string
+    description?: string
+    className?: string
+    showCloseButton?: boolean
+}) {
+    return (
+        <Dialog {...props}>
+            <DialogHeader className='sr-only'>
+                <DialogTitle>{title}</DialogTitle>
+                <DialogDescription>{description}</DialogDescription>
+            </DialogHeader>
+            <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
+                <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+    return (
+        <div data-slot='command-input-wrapper' className='flex h-9 items-center gap-2 border-b px-3'>
+            <SearchIcon className='size-4 shrink-0 opacity-50' />
+            <CommandPrimitive.Input
+                data-slot='command-input'
+                className={cn(
+                    'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+                    className,
+                )}
+                {...props}
+            />
+        </div>
+    )
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+    return (
+        <CommandPrimitive.List
+            data-slot='command-list'
+            className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+            {...props}
+        />
+    )
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+    return <CommandPrimitive.Empty data-slot='command-empty' className='py-6 text-center text-sm' {...props} />
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+    return (
+        <CommandPrimitive.Group
+            data-slot='command-group'
+            className={cn(
+                'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+                className,
+            )}
+            {...props}
+        />
+    )
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+    return (
+        <CommandPrimitive.Separator
+            data-slot='command-separator'
+            className={cn('bg-border -mx-1 h-px', className)}
+            {...props}
+        />
+    )
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+    return (
+        <CommandPrimitive.Item
+            data-slot='command-item'
+            className={cn(
+                "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        />
+    )
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+    return (
+        <span
+            data-slot='command-shortcut'
+            className={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
+            {...props}
+        />
+    )
+}
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+}