create-nextjs-cms 0.9.15 → 0.9.17

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

@@ -1,166 +1,220 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { DayPicker, getDefaultClassNames, type DayButton } from 'react-day-picker'
-
-import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
-
-function Calendar({
-    className,
-    classNames,
-    showOutsideDays = true,
-    captionLayout = 'label',
-    buttonVariant = 'ghost',
-    formatters,
-    components,
-    ...props
-}: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>['variant']
-}) {
-    const defaultClassNames = getDefaultClassNames()
-
-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn(
-                'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
-                String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-                String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-                className,
-            )}
-            captionLayout={captionLayout}
-            formatters={{
-                formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
-                ...formatters,
-            }}
-            classNames={{
-                root: cn('w-fit', defaultClassNames.root),
-                months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
-                month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-                nav: cn(
-                    'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
-                    defaultClassNames.nav,
-                ),
-                button_previous: cn(
-                    buttonVariants({ variant: buttonVariant }),
-                    'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-                    defaultClassNames.button_previous,
-                ),
-                button_next: cn(
-                    buttonVariants({ variant: buttonVariant }),
-                    'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-                    defaultClassNames.button_next,
-                ),
-                month_caption: cn(
-                    'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
-                    defaultClassNames.month_caption,
-                ),
-                dropdowns: cn(
-                    'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
-                    defaultClassNames.dropdowns,
-                ),
-                dropdown_root: cn(
-                    'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
-                    defaultClassNames.dropdown_root,
-                ),
-                dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
-                caption_label: cn(
-                    'select-none font-medium',
-                    captionLayout === 'label'
-                        ? 'text-sm'
-                        : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
-                    defaultClassNames.caption_label,
-                ),
-                table: 'w-full border-collapse',
-                weekdays: cn('flex', defaultClassNames.weekdays),
-                weekday: cn(
-                    'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
-                    defaultClassNames.weekday,
-                ),
-                week: cn('flex w-full mt-2', defaultClassNames.week),
-                week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
-                week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
-                day: cn(
-                    'relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
-                    props.showWeekNumber
-                        ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
-                        : '[&:first-child[data-selected=true]_button]:rounded-l-md',
-                    defaultClassNames.day,
-                ),
-                range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
-                range_middle: cn('rounded-none', defaultClassNames.range_middle),
-                range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-                today: cn(
-                    'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
-                    defaultClassNames.today,
-                ),
-                outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
-                disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
-                hidden: cn('invisible', defaultClassNames.hidden),
-                ...classNames,
-            }}
-            components={{
-                Root: ({ className, rootRef, ...props }) => {
-                    return <div data-slot='calendar' ref={rootRef} className={cn(className)} {...props} />
-                },
-                Chevron: ({ className, orientation, ...props }) => {
-                    if (orientation === 'left') {
-                        return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
-                    }
-
-                    if (orientation === 'right') {
-                        return <ChevronRightIcon className={cn('size-4', className)} {...props} />
-                    }
-
-                    return <ChevronDownIcon className={cn('size-4', className)} {...props} />
-                },
-                DayButton: CalendarDayButton,
-                WeekNumber: ({ children, ...props }) => {
-                    return (
-                        <td {...props}>
-                            <div className='flex size-(--cell-size) items-center justify-center text-center'>
-                                {children}
-                            </div>
-                        </td>
-                    )
-                },
-                ...components,
-            }}
-            {...props}
-        />
-    )
-}
-
-function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
-    const defaultClassNames = getDefaultClassNames()
-
-    const ref = React.useRef<HTMLButtonElement>(null)
-    React.useEffect(() => {
-        if (modifiers.focused) ref.current?.focus()
-    }, [modifiers.focused])
-
-    return (
-        <Button
-            ref={ref}
-            variant='ghost'
-            size='icon'
-            data-day={day.date.toLocaleDateString()}
-            data-selected-single={
-                modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
-            }
-            data-range-start={modifiers.range_start}
-            data-range-end={modifiers.range_end}
-            data-range-middle={modifiers.range_middle}
-            className={cn(
-                'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
-                defaultClassNames.day,
-                className,
-            )}
-            {...props}
-        />
-    )
-}
-
-export { Calendar, CalendarDayButton }
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex h-8 items-center gap-1 rounded-md pe-1 ps-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-md",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-s-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-s-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-e-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-e-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-s-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

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

@@ -1,29 +1,29 @@
-'use client'
-
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon, DividerHorizontalIcon } from '@radix-ui/react-icons'
-
-import { cn } from '@/lib/utils'
-
-const Checkbox = React.forwardRef<
-    React.ElementRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <CheckboxPrimitive.Root
-        ref={ref}
-        className={cn(
-            'peer border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state="indeterminate"]:bg-gray-300 dark:data-[state="indeterminate"]:bg-gray-500',
-            className,
-        )}
-        {...props}
-    >
-        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-            {props.checked === 'indeterminate' && <DividerHorizontalIcon />}
-            {props.checked === true && <CheckIcon />}
-        </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
+'use client'
+
+import * as React from 'react'
+import { CheckIcon } from 'lucide-react'
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+    return (
+        <CheckboxPrimitive.Root
+            data-slot='checkbox'
+            className={cn(
+                'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+                className,
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator
+                data-slot='checkbox-indicator'
+                className='grid place-content-center text-current transition-none'
+            >
+                <CheckIcon className='size-3.5' />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    )
+}
+
+export { Checkbox }

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

@@ -118,7 +118,7 @@ function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>)
     return (
         <span
             data-slot='command-shortcut'
-            className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+            className={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
             {...props}
         />
     )

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

@@ -38,7 +38,7 @@ function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof
             <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 top-[50%] left-[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',
+                    '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 rtl:-translate-x-[-50%]',
                     className,
                 )}
                 {...props}
@@ -51,7 +51,7 @@ 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-left', className)}
+            className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
             {...props}
         />
     )

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

@@ -49,7 +49,7 @@ function DialogContent({
             <DialogPrimitive.Content
                 data-slot='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 top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] border p-6 shadow-lg duration-200 outline-none',
+                    '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%] border p-6 shadow-lg duration-200 outline-none rtl:-translate-x-[-50%]',
                     className,
                 )}
                 {...props}
@@ -58,7 +58,7 @@ function DialogContent({
                 {showCloseButton && (
                     <DialogPrimitive.Close
                         data-slot='dialog-close'
-                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
                     >
                         <XIcon />
                         <span className='sr-only'>Close</span>
@@ -73,7 +73,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
     return (
         <div
             data-slot='dialog-header'
-            className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+            className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
             {...props}
         />
     )

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

@@ -49,7 +49,7 @@ function DialogContent({
             <DialogPrimitive.Content
                 data-slot='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 top-[50%] left-[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 outline-none sm:max-w-lg',
+                    '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 outline-none sm:max-w-lg rtl:-translate-x-[-50%]',
                     className,
                 )}
                 {...props}
@@ -58,7 +58,7 @@ function DialogContent({
                 {showCloseButton && (
                     <DialogPrimitive.Close
                         data-slot='dialog-close'
-                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
                     >
                         <XIcon />
                         <span className='sr-only'>Close</span>
@@ -73,7 +73,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
     return (
         <div
             data-slot='dialog-header'
-            className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+            className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
             {...props}
         />
     )

package/templates/default/components/ui/dropdown-menu.tsx

@@ -28,13 +28,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
         ref={ref}
         className={cn(
             'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
-            inset && 'pl-8',
+            inset && 'ps-8',
             className,
         )}
         {...props}
     >
         {children}
-        <ChevronRightIcon className='ml-auto h-4 w-4' />
+        <ChevronRightIcon className='ms-auto h-4 w-4' />
     </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
         ref={ref}
         className={cn(
             'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
-            inset && 'pl-8',
+            inset && 'ps-8',
             className,
         )}
         {...props}
@@ -98,13 +98,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+            'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
             className,
         )}
         checked={checked}
         {...props}
     >
-        <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <span className='absolute start-2 flex h-3.5 w-3.5 items-center justify-center'>
             <DropdownMenuPrimitive.ItemIndicator>
                 <CheckIcon className='h-4 w-4' />
             </DropdownMenuPrimitive.ItemIndicator>
@@ -121,12 +121,12 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+            'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
             className,
         )}
         {...props}
     >
-        <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <span className='absolute start-2 flex h-3.5 w-3.5 items-center justify-center'>
             <DropdownMenuPrimitive.ItemIndicator>
                 <DotFilledIcon className='h-4 w-4 fill-current' />
             </DropdownMenuPrimitive.ItemIndicator>
@@ -144,7 +144,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
     <DropdownMenuPrimitive.Label
         ref={ref}
-        className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+        className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', className)}
         {...props}
     />
 ))
@@ -159,7 +159,7 @@ const DropdownMenuSeparator = React.forwardRef<
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-    return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+    return <span className={cn('ms-auto text-xs tracking-widest opacity-60', className)} {...props} />
 }
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 

package/templates/default/components/ui/input-group.tsx

@@ -8,7 +8,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
         <div
             ref={ref}
             className={cn(
-                'flex items-stretch overflow-hidden rounded shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus-within:ring-blue-500 hover:focus-within:ring-blue-500',
+                'flex items-stretch overflow-hidden rounded shadow-xs ring-2 ring-gray-300 outline-0 focus-within:ring-blue-500 hover:ring-gray-400 hover:focus-within:ring-blue-500',
                 className,
             )}
             {...props}

package/templates/default/components/ui/scroll-area.tsx

@@ -28,7 +28,7 @@ const ScrollBar = React.forwardRef<
         orientation={orientation}
         className={cn(
             'flex touch-none transition-colors select-none',
-            orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+            orientation === 'vertical' && 'h-full w-2.5 border-s border-s-transparent p-px',
             orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
             className,
         )}