@octanejs/shadcn 0.0.52 → 0.0.53

package/src/bases/radix/ui/alert.tsrx

@@ -6,12 +6,13 @@ import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 
 export const alertVariants = cva(
-	'group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 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 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\'size-\'])]:size-4',
+	"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 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 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
 	{
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
-				destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+				destructive:
+					'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
 			},
 		},
 		defaultVariants: {
@@ -33,10 +34,10 @@ export function Alert({ className, variant, ...props }: AlertProps) @{
 	/>
 }
 
-export function AlertTitle({ className, ...props }: { className?: string } & Record<
-	string,
-	unknown
->) @{
+export function AlertTitle({
+	className,
+	...props
+}: { className?: string } & Record<string, unknown>) @{
 	<div
 		data-slot="alert-title"
 		className={cn(
@@ -47,10 +48,10 @@ export function AlertTitle({ className, ...props }: { className?: string } & Rec
 	/>
 }
 
-export function AlertDescription({ className, ...props }: { className?: string } & Record<
-	string,
-	unknown
->) @{
+export function AlertDescription({
+	className,
+	...props
+}: { className?: string } & Record<string, unknown>) @{
 	<div
 		data-slot="alert-description"
 		className={cn(
@@ -61,9 +62,9 @@ export function AlertDescription({ className, ...props }: { className?: string }
 	/>
 }
 
-export function AlertAction({ className, ...props }: { className?: string } & Record<
-	string,
-	unknown
->) @{
+export function AlertAction({
+	className,
+	...props
+}: { className?: string } & Record<string, unknown>) @{
 	<div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
 }

package/src/bases/radix/ui/badge.tsrx

@@ -14,7 +14,8 @@ export const badgeVariants = cva(
 			variant: {
 				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
 				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-				destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				destructive:
+					'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
 				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
 				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
 				link: 'text-primary underline-offset-4 hover:underline',

package/src/bases/radix/ui/button.tsrx

@@ -11,25 +11,32 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 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/radix/ui/context-menu.tsrx

@@ -40,7 +40,10 @@ export function ContextMenuRadioGroup(props: Record<string, unknown>) @{
 	<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
 }
 
-export function ContextMenuContent({ className, ...props }: Props & {
+export function ContextMenuContent({
+	className,
+	...props
+}: Props & {
 	side?: 'top' | 'right' | 'bottom' | 'left';
 }) {
 	return createElement(
@@ -57,7 +60,12 @@ export function ContextMenuContent({ className, ...props }: Props & {
 	);
 }
 
-export function ContextMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+export function ContextMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: Props & {
 	inset?: boolean;
 	variant?: 'default' | 'destructive';
 }) @{
@@ -66,7 +74,7 @@ export function ContextMenuItem({ className, inset, variant = 'default', ...prop
 		data-inset={inset}
 		data-variant={variant}
 		className={cn(
-			'group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive',
+			"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
 			className,
 		)}
 		{...props}
@@ -80,7 +88,7 @@ export function ContextMenuSubTrigger(props: Props & { inset?: boolean }) @{
 		data-slot="context-menu-sub-trigger"
 		data-inset={inset}
 		className={cn(
-			'flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}
@@ -101,17 +109,19 @@ export function ContextMenuSubContent({ className, ...props }: Props) @{
 	/>
 }
 
-export function ContextMenuCheckboxItem(props: Props & {
-	checked?: boolean | 'indeterminate';
-	inset?: boolean;
-}) @{
+export function ContextMenuCheckboxItem(
+	props: Props & {
+		checked?: boolean | 'indeterminate';
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, checked, inset, ...rest } = props;
 
 	<ContextMenuPrimitive.CheckboxItem
 		data-slot="context-menu-checkbox-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		checked={checked}
@@ -133,7 +143,7 @@ export function ContextMenuRadioItem(props: Props & { inset?: boolean }) @{
 		data-slot="context-menu-radio-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}

package/src/bases/radix/ui/dropdown-menu.tsrx

@@ -53,7 +53,12 @@ export function DropdownMenuGroup(props: Record<string, unknown>) @{
 	<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 }
 
-export function DropdownMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+export function DropdownMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: Props & {
 	inset?: boolean;
 	variant?: 'default' | 'destructive';
 }) @{
@@ -62,24 +67,26 @@ export function DropdownMenuItem({ className, inset, variant = 'default', ...pro
 		data-inset={inset}
 		data-variant={variant}
 		className={cn(
-			'group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',
+			"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
 			className,
 		)}
 		{...props}
 	/>
 }
 
-export function DropdownMenuCheckboxItem(props: Props & {
-	checked?: boolean | 'indeterminate';
-	inset?: boolean;
-}) @{
+export function DropdownMenuCheckboxItem(
+	props: Props & {
+		checked?: boolean | 'indeterminate';
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, checked, inset, ...rest } = props;
 
 	<DropdownMenuPrimitive.CheckboxItem
 		data-slot="dropdown-menu-checkbox-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		checked={checked}
@@ -108,7 +115,7 @@ export function DropdownMenuRadioItem(props: Props & { inset?: boolean }) @{
 		data-slot="dropdown-menu-radio-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}
@@ -167,7 +174,7 @@ export function DropdownMenuSubTrigger(props: Props & { inset?: boolean }) @{
 		data-slot="dropdown-menu-sub-trigger"
 		data-inset={inset}
 		className={cn(
-			'flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}

package/src/bases/radix/ui/empty.tsrx

@@ -32,7 +32,7 @@ export const emptyMediaVariants = cva(
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				icon: 'flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*=\'size-\'])]:size-4',
+				icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
 			},
 		},
 		defaultVariants: {

package/src/bases/radix/ui/field.tsrx

@@ -23,7 +23,11 @@ export function FieldSet({ className, ...props }: Props) @{
 	/>
 }
 
-export function FieldLegend({ className, variant = 'legend', ...props }: Props & {
+export function FieldLegend({
+	className,
+	variant = 'legend',
+	...props
+}: Props & {
 	variant?: 'legend' | 'label';
 }) @{
 	<legend
@@ -54,8 +58,10 @@ export const fieldVariants = cva(
 		variants: {
 			orientation: {
 				vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
-				horizontal: 'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-				responsive: 'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				horizontal:
+					'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				responsive:
+					'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 			},
 		},
 		defaultVariants: {
@@ -64,7 +70,11 @@ export const fieldVariants = cva(
 	},
 );
 
-export function Field({ className, orientation = 'vertical', ...props }: Props & {
+export function Field({
+	className,
+	orientation = 'vertical',
+	...props
+}: Props & {
 	orientation?: VariantProps<typeof fieldVariants>['orientation'];
 }) @{
 	<div
@@ -156,19 +166,15 @@ export function FieldError(props: Props & { errors?: Array<{ message?: string }
 		const errors = props.errors;
 		if (!errors?.length) return null;
 
-		const uniqueErrors = [
-			...new Map(errors.map((error) => [error?.message, error])).values(),
-		];
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
 
 		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
 
 		return createElement(
 			'ul',
 			{ className: 'ml-4 flex list-disc flex-col gap-1' },
-			uniqueErrors.map(
-				(error, index) => error?.message
-					? createElement('li', { key: index }, error.message)
-					: null,
+			uniqueErrors.map((error, index) =>
+				error?.message ? createElement('li', { key: index }, error.message) : null,
 			),
 		);
 	});

package/src/bases/radix/ui/item.tsrx

@@ -93,8 +93,9 @@ export const itemMediaVariants = cva(
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				icon: '[&_svg:not([class*=\'size-\'])]:size-4',
-				image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image:
+					'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
 			},
 		},
 		defaultVariants: {

package/src/bases/radix/ui/menubar.tsrx

@@ -71,7 +71,12 @@ export function MenubarContent({
 	);
 }
 
-export function MenubarItem({ className, inset, variant = 'default', ...props }: Props & {
+export function MenubarItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: Props & {
 	inset?: boolean;
 	variant?: 'default' | 'destructive';
 }) @{
@@ -80,17 +85,19 @@ export function MenubarItem({ className, inset, variant = 'default', ...props }:
 		data-inset={inset}
 		data-variant={variant}
 		className={cn(
-			'group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!',
+			"group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
 			className,
 		)}
 		{...props}
 	/>
 }
 
-export function MenubarCheckboxItem(props: Props & {
-	checked?: boolean | 'indeterminate';
-	inset?: boolean;
-}) @{
+export function MenubarCheckboxItem(
+	props: Props & {
+		checked?: boolean | 'indeterminate';
+		inset?: boolean;
+	},
+) @{
 	const { className, children: _children, checked, inset, ...rest } = props;
 
 	<MenubarPrimitive.CheckboxItem
@@ -103,9 +110,7 @@ export function MenubarCheckboxItem(props: Props & {
 		checked={checked}
 		{...rest}
 	>
-		<span
-			className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
-		>
+		<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
 			<MenubarPrimitive.ItemIndicator>
 				<CheckIcon />
 			</MenubarPrimitive.ItemIndicator>
@@ -121,14 +126,12 @@ export function MenubarRadioItem(props: Props & { inset?: boolean }) @{
 		data-slot="menubar-radio-item"
 		data-inset={inset}
 		className={cn(
-			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}
 	>
-		<span
-			className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
-		>
+		<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
 			<MenubarPrimitive.ItemIndicator>
 				<CheckIcon />
 			</MenubarPrimitive.ItemIndicator>
@@ -176,7 +179,7 @@ export function MenubarSubTrigger(props: Props & { inset?: boolean }) @{
 		data-slot="menubar-sub-trigger"
 		data-inset={inset}
 		className={cn(
-			'flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...rest}

package/src/bases/radix/ui/native-select.tsrx

@@ -32,10 +32,10 @@ export function NativeSelect({ className, size = 'default', ...props }: NativeSe
 	</div>
 }
 
-export function NativeSelectOption({ className, ...props }: { className?: string } & Record<
-	string,
-	unknown
->) @{
+export function NativeSelectOption({
+	className,
+	...props
+}: { className?: string } & Record<string, unknown>) @{
 	<option
 		data-slot="native-select-option"
 		className={cn('bg-[Canvas] text-[CanvasText]', className)}
@@ -43,10 +43,10 @@ export function NativeSelectOption({ className, ...props }: { className?: string
 	/>
 }
 
-export function NativeSelectOptGroup({ className, ...props }: { className?: string } & Record<
-	string,
-	unknown
->) @{
+export function NativeSelectOptGroup({
+	className,
+	...props
+}: { className?: string } & Record<string, unknown>) @{
 	<optgroup
 		data-slot="native-select-optgroup"
 		className={cn('bg-[Canvas] text-[CanvasText]', className)}

package/src/bases/radix/ui/navigation-menu.tsrx

@@ -58,8 +58,7 @@ export function NavigationMenuTrigger(props: Props) @{
 		className={cn(navigationMenuTriggerStyle(), 'group', className)}
 		{...rest}
 	>
-		{props.children}
-		{' '}
+		{props.children}{' '}
 		<ChevronDownIcon
 			className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
 			aria-hidden="true"
@@ -95,7 +94,7 @@ export function NavigationMenuLink({ className, ...props }: Props) @{
 	<NavigationMenuPrimitive.Link
 		data-slot="navigation-menu-link"
 		className={cn(
-			'flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}

package/src/bases/radix/ui/pagination.tsrx

@@ -83,7 +83,11 @@ export function PaginationPrevious({
 	</PaginationLink>
 }
 
-export function PaginationNext({ className, text = 'Next', ...props }: PaginationLinkProps & {
+export function PaginationNext({
+	className,
+	text = 'Next',
+	...props
+}: PaginationLinkProps & {
 	text?: string;
 }) @{
 	<PaginationLink
@@ -102,7 +106,7 @@ export function PaginationEllipsis({ className, ...props }: Props) @{
 		aria-hidden="true"
 		data-slot="pagination-ellipsis"
 		className={cn(
-			'flex size-8 items-center justify-center [&_svg:not([class*=\'size-\'])]:size-4',
+			"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}

package/src/bases/radix/ui/radio-group.tsrx

@@ -29,9 +29,7 @@ export function RadioGroupItem({ className, ...props }: Props) @{
 			data-slot="radio-group-indicator"
 			className="relative flex items-center justify-center"
 		>
-			<CircleIcon
-				className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary"
-			/>
+			<CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
 		</RadioGroupPrimitive.Indicator>
 	</RadioGroupPrimitive.Item>
 }

package/src/bases/radix/ui/scroll-area.tsrx

@@ -16,13 +16,19 @@ export function ScrollArea(props: Props) @{
 		<ScrollAreaPrimitive.Viewport
 			data-slot="scroll-area-viewport"
 			className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
-		>{props.children}</ScrollAreaPrimitive.Viewport>
+		>
+			{props.children}
+		</ScrollAreaPrimitive.Viewport>
 		<ScrollBar />
 		<ScrollAreaPrimitive.Corner />
 	</ScrollAreaPrimitive.Root>
 }
 
-export function ScrollBar({ className, orientation = 'vertical', ...props }: Props & {
+export function ScrollBar({
+	className,
+	orientation = 'vertical',
+	...props
+}: Props & {
 	orientation?: 'vertical' | 'horizontal';
 }) @{
 	<ScrollAreaPrimitive.ScrollAreaScrollbar

package/src/bases/radix/ui/select.tsrx

@@ -27,7 +27,12 @@ export function SelectValue(props: Record<string, unknown>) @{
 	<SelectPrimitive.Value data-slot="select-value" {...props} />
 }
 
-export function SelectTrigger({ className, size = 'default', children, ...props }: Props & {
+export function SelectTrigger({
+	className,
+	size = 'default',
+	children,
+	...props
+}: Props & {
 	size?: 'sm' | 'default';
 }) {
 	return createElement(
@@ -36,7 +41,7 @@ export function SelectTrigger({ className, size = 'default', children, ...props
 			'data-slot': 'select-trigger',
 			'data-size': size,
 			className: cn(
-				'flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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',
+				"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
 				className,
 			),
 			...props,
@@ -109,7 +114,7 @@ export function SelectItem({ className, children, ...props }: Props) {
 		{
 			'data-slot': 'select-item',
 			className: cn(
-				'relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+				"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 				className,
 			),
 			...props,
@@ -142,7 +147,7 @@ export function SelectScrollUpButton({ className, ...props }: Props) @{
 	<SelectPrimitive.ScrollUpButton
 		data-slot="select-scroll-up-button"
 		className={cn(
-			'z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4',
+			"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}
@@ -155,7 +160,7 @@ export function SelectScrollDownButton({ className, ...props }: Props) @{
 	<SelectPrimitive.ScrollDownButton
 		data-slot="select-scroll-down-button"
 		className={cn(
-			'z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4',
+			"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
 			className,
 		)}
 		{...props}