@octanejs/shadcn 0.0.52 → 0.0.53

package/src/bases/react-aria/ui/scroll-area.tsrx

@@ -3,12 +3,16 @@ import type { HostProps } from '../../../lib/types';
 
 export function ScrollArea({ className, children, ...props }: HostProps<'div'>) {
 	// Use native scrollbar-width and scrollbar-color to customize the scrollbar.
-	return <div
-		data-slot="scroll-area"
-		className={cn(
-			'relative [scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] overflow-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
-			className,
-		)}
-		{...props}
-	>{children}</div>;
+	return (
+		<div
+			data-slot="scroll-area"
+			className={cn(
+				'relative [scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] overflow-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
 }

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

@@ -22,36 +22,45 @@ export function SheetTrigger({ ...props }: SheetTriggerPrimitiveProps) {
 	return <SheetTriggerPrimitive data-slot="sheet-trigger" {...props} />;
 }
 
-export function SheetClose({ className, variant = 'outline', size = 'default', ...props }: Record<
-	string,
-	any
->) {
-	return <Button
-		slot="close"
-		data-slot="sheet-close"
-		variant={variant}
-		size={size}
-		className={cn(className)}
-		{...props}
-	/>;
+export function SheetClose({
+	className,
+	variant = 'outline',
+	size = 'default',
+	...props
+}: Record<string, any>) {
+	return (
+		<Button
+			slot="close"
+			data-slot="sheet-close"
+			variant={variant}
+			size={size}
+			className={cn(className)}
+			{...props}
+		/>
+	);
 }
 
-function SheetOverlay({ className, children, ...props }: Omit<
-	ModalOverlayPrimitiveProps,
-	'className' | 'children'
-> & {
+function SheetOverlay({
+	className,
+	children,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & {
 	className?: string;
 	children: OctaneNode;
 }) {
-	return <ModalOverlayPrimitive
-		data-slot="sheet-overlay"
-		isDismissable
-		className={cn(
-			'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-entering:opacity-0 data-exiting:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
-			className,
-		)}
-		{...props}
-	>{children}</ModalOverlayPrimitive>;
+	return (
+		<ModalOverlayPrimitive
+			data-slot="sheet-overlay"
+			isDismissable
+			className={cn(
+				'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-entering:opacity-0 data-exiting:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ModalOverlayPrimitive>
+	);
 }
 
 export function Sheet({
@@ -66,28 +75,31 @@ export function Sheet({
 	side?: 'top' | 'right' | 'bottom' | 'left';
 	showCloseButton?: boolean;
 }) {
-	return <SheetOverlay {...props}>
-		<ModalPrimitive
-			data-slot="sheet-content"
-			data-side={side}
-			className={cn(
-				'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-entering:opacity-0 data-exiting:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-entering:translate-y-[2.5rem] data-[side=bottom]:data-exiting:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-entering:translate-x-[-2.5rem] data-[side=left]:data-exiting:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-entering:translate-x-[2.5rem] data-[side=right]:data-exiting:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-entering:translate-y-[-2.5rem] data-[side=top]:data-exiting:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
-				className,
-			)}
-		>
-			<SheetPrimitive
-				data-slot="sheet"
-				className="[display:inherit] h-full max-h-[inherit] [flex-direction:inherit] [gap:inherit] outline-none"
+	return (
+		<SheetOverlay {...props}>
+			<ModalPrimitive
+				data-slot="sheet-content"
+				data-side={side}
+				className={cn(
+					'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-entering:opacity-0 data-exiting:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-entering:translate-y-[2.5rem] data-[side=bottom]:data-exiting:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-entering:translate-x-[-2.5rem] data-[side=left]:data-exiting:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-entering:translate-x-[2.5rem] data-[side=right]:data-exiting:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-entering:translate-y-[-2.5rem] data-[side=top]:data-exiting:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+					className,
+				)}
 			>
-				{children}
-				{showCloseButton &&
-					<SheetClose variant="ghost" className="absolute top-3 right-3" size="icon-sm">
-						<XIcon />
-						<span className="sr-only">Close</span>
-					</SheetClose>}
-			</SheetPrimitive>
-		</ModalPrimitive>
-	</SheetOverlay>;
+				<SheetPrimitive
+					data-slot="sheet"
+					className="[display:inherit] h-full max-h-[inherit] [flex-direction:inherit] [gap:inherit] outline-none"
+				>
+					{children}
+					{showCloseButton && (
+						<SheetClose variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</SheetClose>
+					)}
+				</SheetPrimitive>
+			</ModalPrimitive>
+		</SheetOverlay>
+	);
 }
 
 export function SheetContent({
@@ -100,43 +112,50 @@ export function SheetContent({
 	side?: 'top' | 'right' | 'bottom' | 'left';
 	showCloseButton?: boolean;
 }) {
-	return <Sheet
-		className={className}
-		side={side}
-		showCloseButton={showCloseButton}
-		{...props}
-	>{children}</Sheet>;
+	return (
+		<Sheet className={className} side={side} showCloseButton={showCloseButton} {...props}>
+			{children}
+		</Sheet>
+	);
 }
 
 export function SheetHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="sheet-header"
-		className={cn('flex flex-col gap-0.5 p-4', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn('flex flex-col gap-0.5 p-4', className)}
+			{...props}
+		/>
+	);
 }
 
 export function SheetFooter({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="sheet-footer"
-		className={cn('mt-auto flex flex-col gap-2 p-4', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+			{...props}
+		/>
+	);
 }
 
 export function SheetTitle({ className, ...props }: Omit<HeadingProps, 'slot'>) {
-	return <Heading
-		slot="title"
-		data-slot="sheet-title"
-		className={cn('text-base font-medium text-foreground', className)}
-		{...props}
-	/>;
+	return (
+		<Heading
+			slot="title"
+			data-slot="sheet-title"
+			className={cn('text-base font-medium text-foreground', className)}
+			{...props}
+		/>
+	);
 }
 
 export function SheetDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
-	return <div
-		data-slot="sheet-description"
-		className={cn('text-sm text-muted-foreground', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="sheet-description"
+			className={cn('text-sm text-muted-foreground', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -2,9 +2,11 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function Skeleton({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="skeleton"
-		className={cn('animate-pulse rounded-md bg-muted', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn('animate-pulse rounded-md bg-muted', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -14,43 +14,49 @@ import {
 import { cn } from 'cn';
 
 type SliderValue = number | number[];
-type SliderProps<T extends SliderValue = SliderValue> =
-	Omit<SliderPrimitiveProps<T>, 'className'> & {
-		className?: string;
-	};
+type SliderProps<T extends SliderValue = SliderValue> = Omit<
+	SliderPrimitiveProps<T>,
+	'className'
+> & {
+	className?: string;
+};
 
-export function Slider<T extends SliderValue = SliderValue>({ className, ...props }: SliderProps<
-	T
->) {
-	return <SliderPrimitive
-		className={cn(
-			'group relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col',
-			className,
-		)}
-		data-slot="slider"
-		{...props}
-	>
-		{({ state }: SliderRenderProps) => {
-			return <>
-				<SliderTrack
-					data-slot="slider-track"
-					className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
-				>
-					<SliderFill
-						data-slot="slider-range"
-						className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
-					/>
-				</SliderTrack>
-				{state.values.map(
-					(_: number, index: number) =>
-						<SliderThumb
-							data-slot="slider-thumb"
-							key={index}
-							index={index}
-							className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none group-data-horizontal:top-[50%] group-data-vertical:left-[50%] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
-						/>,
-				)}
-			</>;
-		}}
-	</SliderPrimitive>;
+export function Slider<T extends SliderValue = SliderValue>({
+	className,
+	...props
+}: SliderProps<T>) {
+	return (
+		<SliderPrimitive
+			className={cn(
+				'group relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col',
+				className,
+			)}
+			data-slot="slider"
+			{...props}
+		>
+			{({ state }: SliderRenderProps) => {
+				return (
+					<>
+						<SliderTrack
+							data-slot="slider-track"
+							className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+						>
+							<SliderFill
+								data-slot="slider-range"
+								className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+							/>
+						</SliderTrack>
+						{state.values.map((_: number, index: number) => (
+							<SliderThumb
+								data-slot="slider-thumb"
+								key={index}
+								index={index}
+								className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none group-data-horizontal:top-[50%] group-data-vertical:left-[50%] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+							/>
+						))}
+					</>
+				);
+			}}
+		</SliderPrimitive>
+	);
 }

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

@@ -13,26 +13,34 @@ import {
 
 import { cn } from 'cn';
 
-export function Switch({ className, size = 'default', children, ...props }: SwitchPrimitiveProps & {
+export function Switch({
+	className,
+	size = 'default',
+	children,
+	...props
+}: SwitchPrimitiveProps & {
 	size?: 'sm' | 'default';
 }) {
-	return <SwitchPrimitive
-		data-slot="switch"
-		data-size={size}
-		className={cn(
-			'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none not-data-selected:bg-input 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 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-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:not-data-selected:bg-input/80 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:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-selected:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50',
-			className,
-		)}
-		{...props}
-	>{composeRenderProps(
-		children,
-		(children, { isSelected }: SwitchRenderProps) => <>
-			<span
-				data-slot="switch-thumb"
-				data-selected={isSelected || undefined}
-				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=default]/switch:not-data-selected:translate-x-0 group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:not-data-selected:translate-x-0 dark:not-data-selected:bg-foreground group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground group-data-[size=default]/switch:data-selected:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-selected:translate-x-[calc(100%-2px)] dark:data-selected:bg-primary-foreground"
-			/>
-			{children}
-		</>,
-	)}</SwitchPrimitive>;
+	return (
+		<SwitchPrimitive
+			data-slot="switch"
+			data-size={size}
+			className={cn(
+				'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none not-data-selected:bg-input 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 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-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:not-data-selected:bg-input/80 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:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-selected:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		>
+			{composeRenderProps(children, (children, { isSelected }: SwitchRenderProps) => (
+				<>
+					<span
+						data-slot="switch-thumb"
+						data-selected={isSelected || undefined}
+						className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=default]/switch:not-data-selected:translate-x-0 group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:not-data-selected:translate-x-0 dark:not-data-selected:bg-foreground group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground group-data-[size=default]/switch:data-selected:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-selected:translate-x-[calc(100%-2px)] dark:data-selected:bg-primary-foreground"
+					/>
+					{children}
+				</>
+			))}
+		</SwitchPrimitive>
+	);
 }

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

@@ -23,76 +23,92 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function Table({ className, ...props }: TableProps) {
-	return <div data-slot="table-container" className="relative w-full overflow-x-auto">
-		<TablePrimitive
-			data-slot="table"
-			className={cn('w-full caption-bottom text-sm', className)}
-			{...props}
-		/>
-	</div>;
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<TablePrimitive
+				data-slot="table"
+				className={cn('w-full caption-bottom text-sm', className)}
+				{...props}
+			/>
+		</div>
+	);
 }
 
 export function TableHeader<T extends object>({ className, ...props }: TableHeaderProps<T>) {
-	return <TableHeaderPrimitive
-		data-slot="table-header"
-		className={cn('[&_tr]:border-b', className)}
-		{...props}
-	/>;
+	return (
+		<TableHeaderPrimitive
+			data-slot="table-header"
+			className={cn('[&_tr]:border-b', className)}
+			{...props}
+		/>
+	);
 }
 
 export function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>) {
-	return <TableBodyPrimitive
-		data-slot="table-body"
-		className={cn('data-empty:h-24 data-empty:text-center [&_tr:last-child]:border-0', className)}
-		{...props}
-	/>;
+	return (
+		<TableBodyPrimitive
+			data-slot="table-body"
+			className={cn('data-empty:h-24 data-empty:text-center [&_tr:last-child]:border-0', className)}
+			{...props}
+		/>
+	);
 }
 
 export function TableFooter<T extends object>({ className, ...props }: TableFooterProps<T>) {
-	return <TableFooterPrimitive
-		data-slot="table-footer"
-		className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
-		{...props}
-	/>;
+	return (
+		<TableFooterPrimitive
+			data-slot="table-footer"
+			className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+			{...props}
+		/>
+	);
 }
 
 export function TableRow<T extends object>({ className, ...props }: RowProps<T>) {
-	return <RowPrimitive
-		data-slot="table-row"
-		className={cn(
-			'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted data-selected:bg-muted',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<RowPrimitive
+			data-slot="table-row"
+			className={cn(
+				'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted data-selected:bg-muted',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function TableHead({ className, ...props }: ColumnProps) {
-	return <ColumnPrimitive
-		data-slot="table-head"
-		className={cn(
-			'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<ColumnPrimitive
+			data-slot="table-head"
+			className={cn(
+				'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function TableCell({ className, ...props }: CellProps) {
-	return <CellPrimitive
-		data-slot="table-cell"
-		className={cn(
-			'p-2 align-middle whitespace-nowrap [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<CellPrimitive
+			data-slot="table-cell"
+			className={cn(
+				'p-2 align-middle whitespace-nowrap [&:has([data-slot=checkbox])]:pr-0 [&:has([role=checkbox])]:pr-0',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function TableCaption({ className, ...props }: HostProps<'figcaption'>) {
-	return <figcaption
-		data-slot="table-caption"
-		className={cn('mt-4 text-center text-sm text-muted-foreground', className)}
-		{...props}
-	/>;
+	return (
+		<figcaption
+			data-slot="table-caption"
+			className={cn('mt-4 text-center text-sm text-muted-foreground', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -10,11 +10,13 @@ import type { TabPanelProps, TabProps, TabsProps } from '@octanejs/aria/componen
 import { cn } from 'cn';
 
 export function Tabs({ className, ...props }: TabsProps) {
-	return <TabsPrimitive
-		data-slot="tabs"
-		className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
-		{...props}
-	/>;
+	return (
+		<TabsPrimitive
+			data-slot="tabs"
+			className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
+			{...props}
+		/>
+	);
 }
 
 export const tabsListVariants = cva(
@@ -32,36 +34,43 @@ export const tabsListVariants = cva(
 	},
 );
 
-export function TabsList({ className, variant = 'default', ...props }: Record<
-	string,
-	any
-> & VariantProps<typeof tabsListVariants>) {
-	return <TabListPrimitive
-		data-slot="tabs-list"
-		data-variant={variant}
-		className={cn(tabsListVariants({ variant }), className)}
-		{...props}
-	/>;
+export function TabsList({
+	className,
+	variant = 'default',
+	...props
+}: Record<string, any> & VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabListPrimitive
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }
 
 export function TabsTrigger({ className, ...props }: TabProps) {
-	return <TabPrimitive
-		data-slot="tabs-trigger"
-		className={cn(
-			'relative inline-flex h-[calc(100%-1px)] flex-1 cursor-default items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-			'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent',
-			'data-selected:bg-background data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 dark:data-selected:text-foreground',
-			'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<TabPrimitive
+			data-slot="tabs-trigger"
+			className={cn(
+				"relative inline-flex h-[calc(100%-1px)] flex-1 cursor-default items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent',
+				'data-selected:bg-background data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 dark:data-selected:text-foreground',
+				'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function TabsContent({ className, ...props }: TabPanelProps) {
-	return <TabPanelPrimitive
-		data-slot="tabs-content"
-		className={cn('flex-1 text-sm outline-none', className)}
-		{...props}
-	/>;
+	return (
+		<TabPanelPrimitive
+			data-slot="tabs-content"
+			className={cn('flex-1 text-sm outline-none', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -14,9 +14,8 @@ export interface TextareaProps extends TextareaPrimitiveProps {}
 export function Textarea({ className, ...props }: TextareaProps) @{
 	<TextareaPrimitive
 		data-slot="textarea"
-		className={composeRenderProps(
-			className,
-			(resolved: string | undefined) => cn(
+		className={composeRenderProps(className, (resolved: string | undefined) =>
+			cn(
 				'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
 				resolved,
 			),