betterstart-cli 0.0.22 → 0.0.23

package/dist/assets/adapters/next/templates/init/pages/users/create-user-dialog.tsx

@@ -4,6 +4,7 @@ import { createUser } from '@admin/actions/users'
 import { Button } from '@admin/components/ui/button'
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -111,102 +112,107 @@ export function CreateUserDialog() {
         <Button>Create User</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-135">
-        <DialogHeader>
-          <DialogTitle>Create User</DialogTitle>
-          <DialogDescription>Add a new user to the system</DialogDescription>
-        </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
-            className="space-y-4"
-          >
-            <div className="space-y-4 px-2 pt-2 pb-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="email"
-                        placeholder="user@example.com"
-                        autoComplete="email"
-                        disabled={isPending}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="Full name"
-                        autoComplete="name"
-                        disabled={isPending}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Min 8 characters"
-                        autoComplete="new-password"
-                        disabled={isPending}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Use at least 8 characters for the temporary password.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="role"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Role</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange} disabled={isPending}>
+          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+            <DialogHeader>
+              <DialogTitle>Create User</DialogTitle>
+              <DialogDescription>Add a new user to the system</DialogDescription>
+            </DialogHeader>
+
+            <DialogBody>
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="email"
+                          placeholder="user@example.com"
+                          autoComplete="email"
+                          disabled={isPending}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="Full name"
+                          autoComplete="name"
+                          disabled={isPending}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Password</FormLabel>
                       <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder="Select a role" />
-                        </SelectTrigger>
+                        <Input
+                          type="password"
+                          placeholder="Min 8 characters"
+                          autoComplete="new-password"
+                          disabled={isPending}
+                          {...field}
+                        />
                       </FormControl>
-                      <SelectContent>
-                        <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
-                        <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
-                        <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormDescription>
-                      Choose the access level the new user should start with.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
+                      <FormDescription>
+                        Use at least 8 characters for the temporary password.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="role"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Role</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        disabled={isPending}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select a role" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
+                          <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
+                          <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormDescription>
+                        Choose the access level the new user should start with.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </DialogBody>
+
             <DialogFooter showCloseButton={true}>
               <Button type="submit" disabled={isPending} size="lg">
                 {isPending && <LoaderCircle className="animate-spin" />}

package/dist/assets/adapters/next/templates/init/pages/users/delete-user-dialog.tsx

@@ -3,6 +3,7 @@
 import { deleteUser } from '@admin/actions/users'
 import {
   AlertDialog,
+  AlertDialogBody,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -12,6 +13,7 @@ import {
   AlertDialogTrigger
 } from '@admin/components/ui/alert-dialog'
 import { Button } from '@admin/components/ui/button'
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
 import {
   Form,
   FormControl,
@@ -102,33 +104,23 @@ export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUser
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          onSelect={(e) => e.preventDefault()}
-          className="justify-between text-destructive hover:text-destructive"
-        >
-          <span>Delete user</span>
-          <Trash />
-        </Button>
+        <DropdownMenuItem variant="destructive" onSelect={(event) => event.preventDefault()}>
+          <Trash className="size-4" />
+          Delete user
+        </DropdownMenuItem>
       </AlertDialogTrigger>
       <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
-            <Trash className="size-4 text-destructive" /> Delete {userName}
-            &apos;s account?
-          </AlertDialogTitle>
-          <AlertDialogDescription>
-            This will permanently delete <strong className="text-foreground">{userName}</strong> and{' '}
-            <br />
-            all of their data.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(() => mutation.mutate())}
-            className="flex flex-col gap-4"
-          >
-            <div className="px-2">
+          <form onSubmit={form.handleSubmit(() => mutation.mutate())}>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete account?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will permanently delete <strong className="text-foreground">{userName}</strong>
+                &apos;s account and <br />
+                all of their data. This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogBody>
               <FormField
                 control={form.control}
                 name="confirmation"
@@ -149,7 +141,7 @@ export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUser
                   </FormItem>
                 )}
               />
-            </div>
+            </AlertDialogBody>
             <AlertDialogFooter>
               <AlertDialogCancel type="button" size="lg" disabled={isPending}>
                 Cancel

package/dist/assets/adapters/next/templates/init/pages/users/users-table.tsx

@@ -160,7 +160,7 @@ export function UsersTable<TValue>({
                     return (
                       <DataGridHead
                         key={header.id}
-                        className="group/resize-header relative overflow-hidden"
+                        className="group/resize-header relative overflow-hidden px-4"
                         data-column-id={header.column.id}
                         onMouseEnter={() => setHoveredColumnId(header.column.id)}
                         onMouseLeave={() =>
@@ -204,7 +204,7 @@ export function UsersTable<TValue>({
               {isPending ? (
                 <DataGridRow>
                   <DataGridCell
-                    className="flex h-24 items-center justify-center text-center"
+                    className="flex h-24 items-center justify-center text-center px-4"
                     style={{ gridColumn: '1 / -1' }}
                   >
                     <div className="text-muted-foreground">Loading users...</div>
@@ -213,7 +213,7 @@ export function UsersTable<TValue>({
               ) : error ? (
                 <DataGridRow>
                   <DataGridCell
-                    className="flex h-24 items-center justify-center text-center"
+                    className="flex h-24 items-center justify-center text-center px-4"
                     style={{ gridColumn: '1 / -1' }}
                   >
                     <div className="text-destructive">Error: {error.message}</div>
@@ -232,6 +232,7 @@ export function UsersTable<TValue>({
                             current === cell.column.id ? null : current
                           )
                         }
+                        className="px-4"
                       >
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </DataGridCell>
@@ -241,7 +242,7 @@ export function UsersTable<TValue>({
               ) : (
                 <DataGridRow>
                   <DataGridCell
-                    className="flex h-24 items-center justify-center text-center"
+                    className="flex h-24 items-center justify-center text-center px-4"
                     style={{ gridColumn: '1 / -1' }}
                   >
                     No users found.

package/dist/assets/shared-assets/react-admin/custom/content-editor/math-bubble-menu.tsx

@@ -63,7 +63,7 @@ export function MathBubbleMenu({ editor }: { editor: Editor }) {
         role="toolbar"
         aria-label="Math formatting toolbar"
         className={cn(
-          'flex items-center gap-1 overflow-x-auto border-border rounded-lg border bg-popover p-0 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+          'flex items-center gap-1 overflow-x-auto border-border rounded-sm border bg-popover p-0 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
           'relative z-50'
         )}
       >

package/dist/assets/shared-assets/react-admin/custom/content-editor/remove-table-part-icon.tsx

@@ -11,7 +11,7 @@ export function RemoveTablePartIcon({
   return (
     <span className="tiptap-button-icon relative inline-flex size-4 items-center justify-center">
       <Icon className="size-4" />
-      <MinusIcon className="-right-1 -bottom-0.5 border border-border absolute size-3 rounded-full bg-card stroke-3" />
+      <MinusIcon className="-right-1 -bottom-0.5 border border-border absolute size-3 rounded-sm bg-card stroke-3" />
     </span>
   )
 }

package/dist/assets/shared-assets/react-admin/custom/content-editor/selection-bubble-menu.tsx

@@ -72,7 +72,7 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
           role="toolbar"
           aria-label="Link formatting toolbar"
           className={cn(
-            'flex items-center gap-1 overflow-x-auto border-border border bg-popover p-4 text-foreground shadow-2xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-lg',
+            'flex items-center gap-1 overflow-x-auto border-border border bg-popover p-4 text-foreground shadow-2xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-sm',
             'relative z-10'
           )}
         >
@@ -101,7 +101,7 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
           aria-label="Selection formatting toolbar"
           onPointerDownCapture={handleSelectionMenuPointerDown}
           className={cn(
-            'flex items-center gap-1 overflow-x-auto border-border rounded-full border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            'flex items-center gap-1 overflow-x-auto border-border rounded-sm border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
             'relative z-10'
           )}
         >

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-bubble-menu.tsx

@@ -202,7 +202,7 @@ export function TableBubbleMenu({ editor }: { editor: Editor }) {
           role="toolbar"
           aria-label="Table formatting toolbar"
           className={cn(
-            'flex items-center gap-1 overflow-x-auto border-border rounded-full border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            'flex items-center gap-1 overflow-x-auto border-border rounded-sm border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
             'relative z-50'
           )}
         >

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-button/color-highlight-button.tsx

@@ -49,10 +49,10 @@ export function HighlightSwatch({ highlightColor }: { highlightColor: string })
   return (
     <span
       className={cn(
-        'relative -mx-[0.175rem] size-5 rounded-full transition-transform duration-200 ease-in-out',
+        'relative -mx-[0.175rem] size-5 rounded-sm transition-transform duration-200 ease-in-out',
         'bg-[var(--highlight-color)]',
         'shadow-[inset_0_0_0_1px_var(--highlight-shadow),_0_1px_2px_var(--highlight-shadow-soft)]',
-        "after:content-[''] after:absolute after:inset-0 after:box-border after:size-full after:rounded-full after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out",
+        "after:content-[''] after:absolute after:inset-0 after:box-border after:size-full after:rounded-sm after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out",
         'after:border-[var(--highlight-after-border)]',
         'group-data-[active-state=on]/highlight:scale-110',
         'group-data-[highlighted=true]/highlight:scale-110',

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/color-highlight-popover-content.tsx

@@ -118,7 +118,7 @@ export function ColorHighlightPopoverContent(props: ColorHighlightPopoverContent
         role="menuitem"
         variant="ghost"
         size="icon-sm"
-        className="rounded-full"
+        className="rounded-sm"
         data-highlighted={selectedIndex === colors.length}
         disabled={disabled}
         data-disabled={disabled}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx

@@ -91,7 +91,7 @@ export function ColorHighlightPopover({
       </PopoverTrigger>
       <PopoverContent
         aria-label="Highlight colors"
-        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-full"
+        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-sm"
       >
         <ColorHighlightPopoverContent
           editor={editor}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/highlight-color-button.tsx

@@ -38,7 +38,7 @@ export function HighlightColorButton({
         useColorValue={useColorValue}
         style={buttonStyle}
         size="icon-sm"
-        className="rounded-full"
+        className="rounded-sm"
       />
     )
   }
@@ -48,7 +48,7 @@ export function HighlightColorButton({
       type="button"
       variant="ghost"
       size="icon-sm"
-      className={cn('group/highlight rounded-full')}
+      className={cn('group/highlight rounded-sm')}
       disabled={disabled}
       data-disabled={disabled}
       aria-label={`${color.label} highlight color`}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/source-color-highlight-popover.tsx

@@ -50,7 +50,7 @@ export function SourceColorHighlightPopover({
       </PopoverTrigger>
       <PopoverContent
         aria-label="Highlight colors"
-        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-full"
+        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-sm"
       >
         <ColorHighlightPopoverContent
           mode="source"

package/dist/assets/shared-assets/react-admin/custom/date-range-picker.tsx

@@ -139,7 +139,7 @@ export function DateRangePicker({
           <ChevronDown />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-lg p-0" align="start">
+      <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-sm p-0" align="start">
         <Calendar
           mode="range"
           month={calendarMonth}

package/dist/assets/shared-assets/react-admin/custom/media-field-empty-state.tsx

@@ -9,22 +9,27 @@ import { ImageIcon } from 'lucide-react'
 
 interface MediaFieldEmptyStateProps {
   accept?: string
+  addButtonLabel?: string
   className?: string
   disabled?: boolean
+  isRemovable?: boolean
   mode?: 'single' | 'multi'
   open: boolean
   onOpenChange: (open: boolean) => void
   onSelect: (selected: AdminMedia | AdminMedia[]) => void
+  showAddButton?: boolean
 }
 
 export function MediaFieldEmptyState({
   accept,
+  addButtonLabel = 'Add Image',
   className,
   disabled,
   mode = 'single',
   open,
   onOpenChange,
-  onSelect
+  onSelect,
+  showAddButton = true
 }: MediaFieldEmptyStateProps) {
   function handleAddImage(e: React.MouseEvent<HTMLButtonElement>) {
     e.preventDefault()
@@ -45,17 +50,19 @@ export function MediaFieldEmptyState({
             className="text-muted-foreground transition-opacity group-hover:opacity-0 group-focus-within:opacity-0"
             strokeWidth={1}
           />
-          <div className="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100">
-            <Button
-              type="button"
-              data-media-field-action="true"
-              variant="outline"
-              onClick={handleAddImage}
-              className="border-primary/10"
-            >
-              Add Image
-            </Button>
-          </div>
+          {showAddButton ? (
+            <div className="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100">
+              <Button
+                type="button"
+                data-media-field-action="true"
+                variant="outline"
+                onClick={handleAddImage}
+                className="border-primary/10"
+              >
+                {addButtonLabel}
+              </Button>
+            </div>
+          ) : null}
         </CardContent>
       </Card>
 

package/dist/assets/shared-assets/react-admin/custom/media-field.tsx

@@ -85,7 +85,7 @@ export function MediaField({
           <CardContent className="p-0! relative">
             <div
               data-media-field-preview
-              className="relative aspect-video rounded-lg bg-background overflow-hidden"
+              className="relative aspect-video rounded-sm bg-background overflow-hidden"
             >
               <MediaPreview media={selectedMedia} showMetadata={Boolean(media)} />
             </div>
@@ -94,7 +94,7 @@ export function MediaField({
               <>
                 <div
                   aria-hidden="true"
-                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-lg"
+                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-sm"
                 />
                 <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100">
                   <Button

package/dist/assets/shared-assets/react-admin/custom/nested-object-list-field.tsx

@@ -197,7 +197,7 @@ export function NestedObjectListField({
                       <X />
                     </Button>
                   </div>
-                  <AccordionContent className="space-y-5 border rounded-lg border-border p-5 bg-background mb-4">
+                  <AccordionContent className="space-y-5 border rounded-sm border-border p-5 bg-background mb-4">
                     {children(index)}
                   </AccordionContent>
                 </AccordionItem>

package/dist/assets/shared-assets/react-admin/custom/placeholder-card.tsx

@@ -19,7 +19,7 @@ export function PlaceholderCard({
   return (
     <div
       className={cn(
-        'flex h-75 border border-border border-dashed bg-background flex-col items-center justify-center gap-5 rounded-lg',
+        'flex h-75 border border-border border-dashed bg-background flex-col items-center justify-center gap-5 rounded-sm',
         className
       )}
     >

package/dist/assets/shared-assets/react-admin/custom/placeholder.tsx

@@ -12,7 +12,7 @@ export function Placeholder({ label, description, action, className, ...props }:
   return (
     <div
       className={cn(
-        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg p-8 bg-background',
+        'border flex items-center flex-col gap-2 border-dashed border-border rounded-sm p-8 bg-background',
         className
       )}
       {...props}

package/dist/assets/shared-assets/react-admin/ui/accordion.tsx

@@ -10,7 +10,7 @@ function Accordion({ className, ...props }: React.ComponentProps<typeof Accordio
     <AccordionPrimitive.Root
       data-slot="accordion"
       className={cn(
-        'flex w-full flex-col rounded-lg overflow-hidden border border-border bg-card shadow-2xl/1',
+        'flex w-full flex-col rounded-sm overflow-hidden border border-border bg-card shadow-2xl/1',
         className
       )}
       {...props}

package/dist/assets/shared-assets/react-admin/ui/alert-dialog.tsx

@@ -49,7 +49,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/5 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-sm bg-muted text-popover-foreground ring-1 ring-foreground/5 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 overflow-hidden',
           className
         )}
         {...props}
@@ -63,7 +63,7 @@ function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>)
     <div
       data-slot="alert-dialog-header"
       className={cn(
-        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] bg-muted px-6 pt-6',
         className
       )}
       {...props}
@@ -71,11 +71,21 @@ function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>)
   )
 }
 
+function AlertDialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-body"
+      className={cn('flex shadow-input flex-col gap-1 px-6 py-6', className)}
+      {...props}
+    />
+  )
+}
+
 function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-footer"
-      className={cn('grid w-full grid-cols-2 gap-1 [&>*]:w-full', className)}
+      className={cn('grid w-full grid-cols-2 gap-1 px-6 pb-5 bg-muted *:w-full', className)}
       {...props}
     />
   )
@@ -86,7 +96,7 @@ function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>)
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        "mb-2 inline-flex size-16 items-center justify-center rounded-sm bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
         className
       )}
       {...props}
@@ -166,6 +176,7 @@ export {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogBody,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,

package/dist/assets/shared-assets/react-admin/ui/alert.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import type * as React from 'react'
 
 const alertVariants = cva(
-  "group/alert relative grid w-full 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-foreground *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-sm 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-foreground *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {