betterstart-cli 0.0.106 → 0.0.107

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

@@ -108,9 +108,7 @@ export function CreateUserDialog() {
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <Button>Create User</Button>
-      </DialogTrigger>
+      <DialogTrigger render={<Button />}>Create User</DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
           <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>

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

@@ -104,11 +104,17 @@ export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUser
 
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
-      <AlertDialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(event) => event.preventDefault()}>
-          <Trash className="size-4" />
-          Delete user
-        </DropdownMenuItem>
+      <AlertDialogTrigger
+        render={
+          <DropdownMenuItem
+            variant="destructive"
+            closeOnClick={false}
+            onClick={(event) => event.preventDefault()}
+          />
+        }
+      >
+        <Trash className="size-4" />
+        Delete user
       </AlertDialogTrigger>
       <AlertDialogContent>
         <Form {...form}>

package/dist/assets/adapters/next/templates/init/pages/users/edit-role-dialog.tsx

@@ -56,7 +56,7 @@ export function EditRoleDialog({ userId, currentRole, userName, children }: Edit
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger render={children as React.ReactElement} />
       <DialogContent className="sm:max-w-87.5">
         <DialogHeader>
           <DialogTitle>Edit Role</DialogTitle>

package/dist/assets/shared-assets/react-admin/custom/content-editor/math-popover-button.tsx

@@ -36,17 +36,19 @@ export function MathPopoverButton({
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <MathButton
-          {...buttonProps}
-          text={text}
-          disabled={disabled || !canInsert}
-          aria-label="Insert math"
-          title="Math"
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => setIsOpen((current) => !current)}
-        />
-      </PopoverTrigger>
+      <PopoverTrigger
+        render={
+          <MathButton
+            {...buttonProps}
+            text={text}
+            disabled={disabled || !canInsert}
+            aria-label="Insert math"
+            title="Math"
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={() => setIsOpen((current) => !current)}
+          />
+        }
+      />
       <PopoverContent align="start" className="w-auto gap-0 p-0">
         <MathEditorControls
           disabled={disabled || !canInsert}

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode-dropdown-button.tsx

@@ -29,20 +29,22 @@ export function SourceModeDropdownButton({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          className="w-auto px-2"
-          aria-label={ariaLabel ?? label}
-          title={label}
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => setIsOpen((current) => !current)}
-        >
-          <Icon />
-          <ChevronDownIcon className="tiptap-button-dropdown-small" />
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="w-auto px-2"
+            aria-label={ariaLabel ?? label}
+            title={label}
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={() => setIsOpen((current) => !current)}
+          />
+        }
+      >
+        <Icon />
+        <ChevronDownIcon className="tiptap-button-dropdown-small" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-auto min-w-40">
         <DropdownMenuGroup>{children}</DropdownMenuGroup>

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode.tsx

@@ -173,7 +173,7 @@ export function SourceMode({
                     disabled={disabled}
                     aria-label={option.label}
                     title={option.label}
-                    onSelect={() => applyHeading(option.level)}
+                    onClick={() => applyHeading(option.level)}
                   >
                     <Icon />
                     <span className="tiptap-button-text">{option.label}</span>
@@ -191,7 +191,7 @@ export function SourceMode({
                     disabled={disabled}
                     aria-label={option.label}
                     title={option.label}
-                    onSelect={() => applyList(option.type)}
+                    onClick={() => applyList(option.type)}
                   >
                     <Icon />
                     <span className="tiptap-button-text">{option.label}</span>

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

@@ -19,18 +19,20 @@ export function TableButton({ disabled, editor, onInsertTable }: TableButtonProp
 
   return (
     <Popover open={tableButton.isOpen} onOpenChange={tableButton.setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          disabled={tableButton.isDisabled}
-          aria-label="Insert table"
-          title="Table"
-        >
-          <TableIcon />
-          <span className="tiptap-button-text">Table</span>
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={tableButton.isDisabled}
+            aria-label="Insert table"
+            title="Table"
+          />
+        }
+      >
+        <TableIcon />
+        <span className="tiptap-button-text">Table</span>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-72 p-4">
         <div className="flex flex-col gap-3" onKeyDownCapture={tableButton.handleKeyDown}>

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

@@ -69,20 +69,22 @@ export function ColorHighlightPopover({
 
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>
-        <ColorHighlightPopoverButton
-          disabled={disabled || !canColorHighlight}
-          data-active-state={isActive ? 'on' : 'off'}
-          data-disabled={disabled || !canColorHighlight}
-          aria-pressed={isActive}
-          aria-label={label}
-          title={label}
-          tooltip={tooltip}
-          {...props}
-          ref={ref}
-        >
-          <Icon />
-        </ColorHighlightPopoverButton>
+      <PopoverTrigger
+        render={
+          <ColorHighlightPopoverButton
+            disabled={disabled || !canColorHighlight}
+            data-active-state={isActive ? 'on' : 'off'}
+            data-disabled={disabled || !canColorHighlight}
+            aria-pressed={isActive}
+            aria-label={label}
+            title={label}
+            tooltip={tooltip}
+            {...props}
+            ref={ref}
+          />
+        }
+      >
+        <Icon />
       </PopoverTrigger>
       <PopoverContent
         aria-label="Highlight colors"

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

@@ -31,19 +31,21 @@ export function SourceColorHighlightPopover({
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <ColorHighlightPopoverButton
-          disabled={disabled}
-          data-active-state="off"
-          data-disabled={disabled}
-          aria-pressed={false}
-          aria-label="Highlight"
-          title="Highlight"
-          tooltip={tooltip}
-          {...props}
-        >
-          <HighlighterIcon />
-        </ColorHighlightPopoverButton>
+      <PopoverTrigger
+        render={
+          <ColorHighlightPopoverButton
+            disabled={disabled}
+            data-active-state="off"
+            data-disabled={disabled}
+            aria-pressed={false}
+            aria-label="Highlight"
+            title="Highlight"
+            tooltip={tooltip}
+            {...props}
+          />
+        }
+      >
+        <HighlighterIcon />
       </PopoverTrigger>
       <PopoverContent
         aria-label="Highlight colors"

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu-item.tsx

@@ -27,7 +27,7 @@ export function HeadingDropdownMenuItem({
       disabled={!canToggle}
       aria-label={label}
       title={label}
-      onSelect={() => handleToggle()}
+      onClick={() => handleToggle()}
     >
       <Icon />
       <span className="tiptap-button-text">{label}</span>

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx

@@ -61,35 +61,37 @@ export function HeadingDropdownMenu({
 
   return (
     <DropdownMenu modal={false} open={isOpen} onOpenChange={handleOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          data-active-state={isActive ? 'on' : 'off'}
-          role="button"
-          tabIndex={-1}
-          disabled={!canToggle}
-          data-disabled={!canToggle}
-          aria-label="Format text as heading"
-          aria-pressed={isActive}
-          title={getControlTooltipTitle(tooltip, 'Heading')}
-          size="icon-sm"
-          className="w-auto px-2"
-          {...buttonProps}
-          ref={ref}
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => handleOpenChange(!isOpen)}
-        >
-          {children ? (
-            children
-          ) : (
-            <>
-              <Icon />
-              <ChevronDownIcon className="tiptap-button-dropdown-small" />
-            </>
-          )}
-        </Button>
-      </DropdownMenuTrigger>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            data-active-state={isActive ? 'on' : 'off'}
+            role="button"
+            tabIndex={-1}
+            disabled={!canToggle}
+            data-disabled={!canToggle}
+            aria-label="Format text as heading"
+            aria-pressed={isActive}
+            title={getControlTooltipTitle(tooltip, 'Heading')}
+            size="icon-sm"
+            className="w-auto px-2"
+            {...buttonProps}
+            ref={ref}
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={() => handleOpenChange(!isOpen)}
+          >
+            {children ? (
+              children
+            ) : (
+              <>
+                <Icon />
+                <ChevronDownIcon className="tiptap-button-dropdown-small" />
+              </>
+            )}
+          </Button>
+        }
+      ></DropdownMenuTrigger>
 
       <DropdownMenuContent
         align="start"

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

@@ -62,19 +62,21 @@ export function LinkControlPopover({
 
   return (
     <Popover open={isOpen} onOpenChange={handleOnOpenChange}>
-      <PopoverTrigger asChild>
-        <LinkButton
-          {...buttonProps}
-          disabled={isDisabled}
-          data-active-state={isActive ? 'on' : 'off'}
-          data-disabled={isDisabled}
-          aria-label={label}
-          aria-pressed={isActive}
-          onClick={handleClick}
-          ref={ref}
-        >
-          {children ?? <LinkIcon />}
-        </LinkButton>
+      <PopoverTrigger
+        render={
+          <LinkButton
+            {...buttonProps}
+            disabled={isDisabled}
+            data-active-state={isActive ? 'on' : 'off'}
+            data-disabled={isDisabled}
+            aria-label={label}
+            aria-pressed={isActive}
+            onClick={handleClick}
+            ref={ref}
+          />
+        }
+      >
+        {children ?? <LinkIcon />}
       </PopoverTrigger>
 
       <PopoverContent className="w-auto max-w-[calc(100vw-2rem)]">

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/list-dropdown-menu/list-dropdown-menu-item.tsx

@@ -36,7 +36,7 @@ export function ListDropdownMenuItem({
       disabled={!canToggle}
       aria-label={itemLabel}
       title={itemLabel}
-      onSelect={() => handleToggle()}
+      onClick={() => handleToggle()}
     >
       <Icon />
       <span className="tiptap-button-text">{label}</span>

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx

@@ -59,26 +59,28 @@ export function ListDropdownMenu({
 
   return (
     <DropdownMenu modal={false} open={isOpen} onOpenChange={handleOnOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          data-active-state={isActive ? 'on' : 'off'}
-          role="button"
-          tabIndex={-1}
-          disabled={!canToggle}
-          data-disabled={!canToggle}
-          aria-label="List options"
-          title={getControlTooltipTitle(tooltip, 'List')}
-          size="icon-sm"
-          className="w-auto px-2"
-          {...props}
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => handleOnOpenChange(!isOpen)}
-        >
-          <Icon />
-          <ChevronDownIcon className="tiptap-button-dropdown-small" />
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            data-active-state={isActive ? 'on' : 'off'}
+            role="button"
+            tabIndex={-1}
+            disabled={!canToggle}
+            data-disabled={!canToggle}
+            aria-label="List options"
+            title={getControlTooltipTitle(tooltip, 'List')}
+            size="icon-sm"
+            className="w-auto px-2"
+            {...props}
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={() => handleOnOpenChange(!isOpen)}
+          />
+        }
+      >
+        <Icon />
+        <ChevronDownIcon className="tiptap-button-dropdown-small" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent

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

@@ -32,20 +32,22 @@ export function DatePicker({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="lg"
-          className={cn(
-            'w-full justify-start pl-3! text-left font-normal',
-            { 'text-muted-foreground': !date },
-            className
-          )}
-          disabled={disabled}
-        >
-          <CalendarIcon className="size-4" />
-          {date ? format(date, 'PPP') : <span>{placeholder}</span>}
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            size="lg"
+            className={cn(
+              'w-full justify-start pl-3! text-left font-normal',
+              { 'text-muted-foreground': !date },
+              className
+            )}
+            disabled={disabled}
+          />
+        }
+      >
+        <CalendarIcon className="size-4" />
+        {date ? format(date, 'PPP') : <span>{placeholder}</span>}
       </PopoverTrigger>
       <PopoverContent className="w-auto overflow-hidden p-0" align="start">
         <Calendar

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

@@ -130,12 +130,14 @@ export function DateRangePicker({
         }
       }}
     >
-      <PopoverTrigger asChild>
-        <Button variant="outline" className={cn('w-[206px]', className)} disabled={disabled}>
-          <CalendarIcon />
-          <span className="min-w-0 flex-1 truncate text-left tabular-nums">{triggerLabel}</span>
-          <ChevronDown />
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" className={cn('w-[206px]', className)} disabled={disabled} />
+        }
+      >
+        <CalendarIcon />
+        <span className="min-w-0 flex-1 truncate text-left tabular-nums">{triggerLabel}</span>
+        <ChevronDown />
       </PopoverTrigger>
       <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-sm p-0" align="start">
         <Calendar

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

@@ -346,16 +346,17 @@ const IconPicker = React.forwardRef<React.ComponentRef<typeof PopoverTrigger>, I
     }, [isPopoverVisible, virtualizer])
 
     const selectedIconName = (value || selectedIcon) as IconName | undefined
+    const trigger = React.isValidElement(children) ? (
+      children
+    ) : (
+      <Button variant="outline" size="lg">
+        {selectedIconName ? <DynamicIcon name={selectedIconName} /> : triggerPlaceholder}
+      </Button>
+    )
 
     return (
       <Popover open={open ?? isOpen} onOpenChange={handleOpenChange} modal={modal}>
-        <PopoverTrigger ref={ref} asChild {...props}>
-          {children || (
-            <Button variant="outline" size="lg">
-              {selectedIconName ? <DynamicIcon name={selectedIconName} /> : triggerPlaceholder}
-            </Button>
-          )}
-        </PopoverTrigger>
+        <PopoverTrigger ref={ref} render={trigger} {...props} />
         <PopoverContent className="w-64 p-2">
           {searchable && (
             <Input placeholder={searchPlaceholder} onChange={handleSearchChange} className="mb-2" />

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

@@ -170,10 +170,8 @@ export function NestedObjectListField({
 
           <CardContent className="p-0!">
             <Accordion
-              type="single"
-              collapsible
-              value={expanded}
-              onValueChange={handleExpandedChange}
+              value={expanded ? [expanded] : []}
+              onValueChange={(nextValue) => handleExpandedChange(nextValue[0] ?? '')}
               className="border-none"
             >
               {items.map((_, index) => (

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

@@ -1,47 +1,34 @@
-'use client'
-
-import type * as React from 'react'
 import { cn } from '@admin/utils/shared/cn'
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
-import { Accordion as AccordionPrimitive } from 'radix-ui'
 
-function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
     <AccordionPrimitive.Root
       data-slot="accordion"
-      className={cn(
-        'flex w-full flex-col overflow-hidden rounded-sm border border-border bg-card shadow-2xl/1',
-        className
-      )}
+      className={cn('flex w-full flex-col overflow-hidden rounded-2xl border', className)}
       {...props}
     />
   )
 }
 
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn('not-last:border-b data-open:bg-background', className)}
+      className={cn('not-last:border-b data-open:bg-muted/50', className)}
       {...props}
     />
   )
 }
 
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          'group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-foreground',
+          'group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
           className
         )}
         {...props}
@@ -60,26 +47,22 @@ function AccordionTrigger({
   )
 }
 
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
   return (
-    <AccordionPrimitive.Content
+    <AccordionPrimitive.Panel
       data-slot="accordion-content"
       className="overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div
         className={cn(
-          'h-auto pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+          'h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
           className
         )}
       >
         {children}
       </div>
-    </AccordionPrimitive.Content>
+    </AccordionPrimitive.Panel>
   )
 }