@octanejs/shadcn 0.0.52 → 0.0.54

package/src/bases/react-aria/ui/breadcrumb.tsrx

@@ -20,23 +20,22 @@ import type { HostProps } from '../../../lib/types';
 import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
 
 export function Breadcrumb({ className, ...props }: HostProps<'nav'>) {
-	return <nav
-		aria-label="breadcrumb"
-		data-slot="breadcrumb"
-		className={cn(className)}
-		{...props}
-	/>;
+	return (
+		<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+	);
 }
 
 export function BreadcrumbList<T extends object>({ className, ...props }: BreadcrumbsProps<T>) {
-	return <BreadcrumbsPrimitive
-		data-slot="breadcrumb-list"
-		className={cn(
-			'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<BreadcrumbsPrimitive
+			data-slot="breadcrumb-list"
+			className={cn(
+				'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function BreadcrumbItem({
@@ -45,56 +44,66 @@ export function BreadcrumbItem({
 	separatorClassName,
 	...props
 }: BreadcrumbProps & { separatorClassName?: string }) {
-	return <BreadcrumbPrimitive
-		data-slot="breadcrumb-item"
-		className={cn('inline-flex items-center gap-1', className)}
-		{...props}
-	>{composeRenderProps(
-		children,
-		(children, { isCurrent }: BreadcrumbRenderProps) => <>
-			{children}
-			{!isCurrent &&
-				<span
-					data-slot="breadcrumb-separator"
-					role="presentation"
-					aria-hidden="true"
-					className={cn('[&>svg]:size-3.5', separatorClassName)}
-				>
-					<ChevronRightIcon />
-				</span>}
-		</>,
-	)}</BreadcrumbPrimitive>;
+	return (
+		<BreadcrumbPrimitive
+			data-slot="breadcrumb-item"
+			className={cn('inline-flex items-center gap-1', className)}
+			{...props}
+		>
+			{composeRenderProps(children, (children, { isCurrent }: BreadcrumbRenderProps) => (
+				<>
+					{children}
+					{!isCurrent && (
+						<span
+							data-slot="breadcrumb-separator"
+							role="presentation"
+							aria-hidden="true"
+							className={cn('[&>svg]:size-3.5', separatorClassName)}
+						>
+							<ChevronRightIcon />
+						</span>
+					)}
+				</>
+			))}
+		</BreadcrumbPrimitive>
+	);
 }
 
 export function BreadcrumbLink({ className, render, ...props }: LinkProps) {
-	return <LinkPrimitive
-		data-slot="breadcrumb-link"
-		className={cn('transition-colors hover:text-foreground', className)}
-		render={render}
-		{...props}
-	/>;
+	return (
+		<LinkPrimitive
+			data-slot="breadcrumb-link"
+			className={cn('transition-colors hover:text-foreground', className)}
+			render={render}
+			{...props}
+		/>
+	);
 }
 
 export function BreadcrumbPage({ className, ...props }: HostProps<'span'>) {
-	return <span
-		data-slot="breadcrumb-page"
-		role="link"
-		aria-disabled="true"
-		aria-current="page"
-		className={cn('font-normal text-foreground', className)}
-		{...props}
-	/>;
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			className={cn('font-normal text-foreground', className)}
+			{...props}
+		/>
+	);
 }
 
 export function BreadcrumbEllipsis({ className, ...props }: HostProps<'span'>) {
-	return <span
-		data-slot="breadcrumb-ellipsis"
-		role="presentation"
-		aria-hidden="true"
-		className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
-		{...props}
-	>
-		<MoreHorizontalIcon />
-		<span className="sr-only">More</span>
-	</span>;
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+			{...props}
+		>
+			<MoreHorizontalIcon />
+			<span className="sr-only">More</span>
+		</span>
+	);
 }

package/src/bases/react-aria/ui/button.tsrx

@@ -22,25 +22,32 @@ import type {
 import { cn } from 'cn';
 
 export const buttonVariants = cva(
-	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+	"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 	{
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-				outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
-				secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-				ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
-				destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+				outline:
+					'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+				destructive:
+					'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
-				default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-				xs: 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3',
-				sm: 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3.5',
+				default:
+					'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
 				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
 				icon: 'size-8',
-				'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=\'size-\'])]:size-3',
-				'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm':
+					'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
 				'icon-lg': 'size-9',
 			},
 		},

package/src/bases/react-aria/ui/card.tsrx

@@ -1,73 +1,87 @@
 import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
-export function Card({ className, size = 'default', ...props }: HostProps<'div'> & {
+export function Card({
+	className,
+	size = 'default',
+	...props
+}: HostProps<'div'> & {
 	size?: 'default' | 'sm';
 }) {
-	return <div
-		data-slot="card"
-		data-size={size}
-		className={cn(
-			'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="card"
+			data-size={size}
+			className={cn(
+				'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function CardHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="card-header"
-		className={cn(
-			'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function CardTitle({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="card-title"
-		className={cn(
-			'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="card-title"
+			className={cn(
+				'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function CardDescription({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="card-description"
-		className={cn('text-sm text-muted-foreground', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="card-description"
+			className={cn('text-sm text-muted-foreground', className)}
+			{...props}
+		/>
+	);
 }
 
 export function CardAction({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="card-action"
-		className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="card-action"
+			className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+			{...props}
+		/>
+	);
 }
 
 export function CardContent({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="card-content"
-		className={cn('px-(--card-spacing)', className)}
-		{...props}
-	/>;
+	return (
+		<div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
+	);
 }
 
 export function CardFooter({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="card-footer"
-		className={cn(
-			'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn(
+				'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }

package/src/bases/react-aria/ui/checkbox.tsrx

@@ -15,23 +15,29 @@ import { cn } from 'cn';
 import { CheckIcon } from '@octanejs/lucide';
 
 export function Checkbox({ className, children, ...props }: CheckboxProps) {
-	return <CheckboxPrimitive
-		data-slot="checkbox"
-		className={cn(
-			'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-invalid:data-selected:border-primary dark:data-selected:bg-primary',
-			className,
-		)}
-		{...props}
-	>{composeRenderProps(
-		children,
-		(children, { isSelected, isIndeterminate }: CheckboxRenderProps) => <>
-			<span
-				data-slot="checkbox-indicator"
-				className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
-			>
-				{(isSelected || isIndeterminate) && <CheckIcon />}
-			</span>
-			{children}
-		</>,
-	)}</CheckboxPrimitive>;
+	return (
+		<CheckboxPrimitive
+			data-slot="checkbox"
+			className={cn(
+				'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-invalid:data-selected:border-primary dark:data-selected:bg-primary',
+				className,
+			)}
+			{...props}
+		>
+			{composeRenderProps(
+				children,
+				(children, { isSelected, isIndeterminate }: CheckboxRenderProps) => (
+					<>
+						<span
+							data-slot="checkbox-indicator"
+							className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+						>
+							{(isSelected || isIndeterminate) && <CheckIcon />}
+						</span>
+						{children}
+					</>
+				),
+			)}
+		</CheckboxPrimitive>
+	);
 }

package/src/bases/react-aria/ui/dialog.tsrx

@@ -18,35 +18,44 @@ export function DialogTrigger({ ...props }: DialogTriggerPrimitiveProps) {
 	return <DialogTriggerPrimitive data-slot="dialog-trigger" {...props} />;
 }
 
-export function DialogClose({ className, variant = 'outline', size = 'default', ...props }: Record<
-	string,
-	any
->) {
-	return <Button
-		slot="close"
-		data-slot="dialog-close"
-		variant={variant}
-		size={size}
-		className={cn(className)}
-		{...props}
-	/>;
+export function DialogClose({
+	className,
+	variant = 'outline',
+	size = 'default',
+	...props
+}: Record<string, any>) {
+	return (
+		<Button
+			slot="close"
+			data-slot="dialog-close"
+			variant={variant}
+			size={size}
+			className={cn(className)}
+			{...props}
+		/>
+	);
 }
 
-export function DialogOverlay({ className, children, ...props }: Omit<
-	ModalOverlayPrimitiveProps,
-	'className' | 'children'
-> & {
+export function DialogOverlay({
+	className,
+	children,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & {
 	className?: string;
 	children: OctaneNode;
 }) {
-	return <ModalOverlayPrimitive
-		data-slot="dialog-overlay"
-		className={cn(
-			'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-xs',
-			className,
-		)}
-		{...props}
-	>{children}</ModalOverlayPrimitive>;
+	return (
+		<ModalOverlayPrimitive
+			data-slot="dialog-overlay"
+			className={cn(
+				'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-xs',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ModalOverlayPrimitive>
+	);
 }
 
 export function Dialog({
@@ -55,76 +64,87 @@ export function Dialog({
 	showCloseButton = true,
 	isDismissable = true,
 	...props
-}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & Pick<
-	Record<string, any>,
-	'isDismissable'
-> & {
-	className?: string;
-	children: OctaneNode;
-	showCloseButton?: boolean;
-}) {
-	return <DialogOverlay isDismissable={isDismissable} {...props}>
-		<ModalPrimitive
-			data-slot="dialog-content"
-			className={cn(
-				'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 sm:max-w-sm',
-				className,
-			)}
-		>
-			<DialogPrimitive data-slot="dialog" className="[display:inherit] [gap:inherit] outline-none">
-				{children}
-				{showCloseButton &&
-					<DialogClose variant="ghost" className="absolute top-2 right-2" size="icon-sm">
-						<XIcon />
-						<span className="sr-only">Close</span>
-					</DialogClose>}
-			</DialogPrimitive>
-		</ModalPrimitive>
-	</DialogOverlay>;
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> &
+	Pick<Record<string, any>, 'isDismissable'> & {
+		className?: string;
+		children: OctaneNode;
+		showCloseButton?: boolean;
+	}) {
+	return (
+		<DialogOverlay isDismissable={isDismissable} {...props}>
+			<ModalPrimitive
+				data-slot="dialog-content"
+				className={cn(
+					'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 sm:max-w-sm',
+					className,
+				)}
+			>
+				<DialogPrimitive
+					data-slot="dialog"
+					className="[display:inherit] [gap:inherit] outline-none"
+				>
+					{children}
+					{showCloseButton && (
+						<DialogClose variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</DialogClose>
+					)}
+				</DialogPrimitive>
+			</ModalPrimitive>
+		</DialogOverlay>
+	);
 }
 
 export function DialogHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="dialog-header"
-		className={cn('flex flex-col gap-2', className)}
-		{...props}
-	/>;
+	return (
+		<div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
+	);
 }
 
-export function DialogFooter({ className, showCloseButton = false, children, ...props }: HostProps<
-	'div'
-> & {
+export function DialogFooter({
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: HostProps<'div'> & {
 	showCloseButton?: boolean;
 }) {
-	return <div
-		data-slot="dialog-footer"
-		className={cn(
-			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		{showCloseButton && <DialogClose variant="outline">Close</DialogClose>}
-	</div>;
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && <DialogClose variant="outline">Close</DialogClose>}
+		</div>
+	);
 }
 
 export function DialogTitle({ className, ...props }: Omit<Record<string, any>, 'slot'>) {
-	return <Heading
-		slot="title"
-		data-slot="dialog-title"
-		className={cn('text-base leading-none font-medium', className)}
-		{...props}
-	/>;
+	return (
+		<Heading
+			slot="title"
+			data-slot="dialog-title"
+			className={cn('text-base leading-none font-medium', className)}
+			{...props}
+		/>
+	);
 }
 
 export function DialogDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
-	return <div
-		data-slot="dialog-description"
-		className={cn(
-			'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="dialog-description"
+			className={cn(
+				'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }