@octanejs/shadcn 0.0.52 → 0.0.54

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

@@ -6,24 +6,28 @@ import type { HostProps } from '../../../lib/types';
 import { Separator } from './separator.tsrx';
 
 export function ItemGroup({ className, ...props }: HostProps<'div'>) {
-	return <div
-		role="list"
-		data-slot="item-group"
-		className={cn(
-			'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			role="list"
+			data-slot="item-group"
+			className={cn(
+				'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function ItemSeparator({ className, ...props }: Record<string, any>) {
-	return <Separator
-		data-slot="item-separator"
-		orientation="horizontal"
-		className={cn('my-2', className)}
-		{...props}
-	/>;
+	return (
+		<Separator
+			data-slot="item-separator"
+			orientation="horizontal"
+			className={cn('my-2', className)}
+			{...props}
+		/>
+	);
 }
 
 const itemVariants = cva(
@@ -48,19 +52,22 @@ const itemVariants = cva(
 	},
 );
 
-export function Item({ className, variant = 'default', size = 'default', ...props }: Omit<
-	LinkProps,
-	'children'
-> & Record<string, unknown> & VariantProps<typeof itemVariants>) {
-	const Element =
-		'href' in props ? LinkPrimitive : 'div';
-	return <Element
-		data-slot="item"
-		data-variant={variant}
-		data-size={size}
-		className={cn(itemVariants({ variant, size, className }))}
-		{...props}
-	/>;
+export function Item({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: Omit<LinkProps, 'children'> & Record<string, unknown> & VariantProps<typeof itemVariants>) {
+	const Element = 'href' in props ? LinkPrimitive : 'div';
+	return (
+		<Element
+			data-slot="item"
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
 const itemMediaVariants = cva(
@@ -69,8 +76,9 @@ 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: {
@@ -79,70 +87,82 @@ const itemMediaVariants = cva(
 	},
 );
 
-export function ItemMedia({ className, variant = 'default', ...props }: HostProps<
-	'div'
-> & VariantProps<typeof itemMediaVariants>) {
-	return <div
-		data-slot="item-media"
-		data-variant={variant}
-		className={cn(itemMediaVariants({ variant, className }))}
-		{...props}
-	/>;
+export function ItemMedia({
+	className,
+	variant = 'default',
+	...props
+}: HostProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+	return (
+		<div
+			data-slot="item-media"
+			data-variant={variant}
+			className={cn(itemMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
 }
 
 export function ItemContent({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="item-content"
-		className={cn(
-			'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="item-content"
+			className={cn(
+				'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function ItemTitle({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="item-title"
-		className={cn(
-			'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="item-title"
+			className={cn(
+				'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function ItemDescription({ className, ...props }: HostProps<'p'>) {
-	return <p
-		data-slot="item-description"
-		className={cn(
-			'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<p
+			data-slot="item-description"
+			className={cn(
+				'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function ItemActions({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="item-actions"
-		className={cn('flex items-center gap-2', className)}
-		{...props}
-	/>;
+	return (
+		<div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+	);
 }
 
 export function ItemHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="item-header"
-		className={cn('flex basis-full items-center justify-between gap-2', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="item-header"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	);
 }
 
 export function ItemFooter({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="item-footer"
-		className={cn('flex basis-full items-center justify-between gap-2', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="item-footer"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -14,7 +14,7 @@ export function Kbd({ className, ...props }: KbdProps) @{
 	<KbdPrimitive
 		data-slot="kbd"
 		className={cn(
-			'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*=\'size-\'])]:size-3',
+			"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
 			className,
 		)}
 		{...props}

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

@@ -3,16 +3,18 @@ import { LabelContext, Label as LabelPrimitive, type LabelProps } from '@octanej
 import { cn } from 'cn';
 
 export function Label({ className, htmlFor, slot, ...props }: LabelProps) {
-	const label = <LabelPrimitive
-		data-slot="label"
-		className={cn(
-			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:opacity-50',
-			className,
-		)}
-		{...props}
-		htmlFor={htmlFor}
-		slot={slot}
-	/>;
+	const label = (
+		<LabelPrimitive
+			data-slot="label"
+			className={cn(
+				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:opacity-50',
+				className,
+			)}
+			{...props}
+			htmlFor={htmlFor}
+			slot={slot}
+		/>
+	);
 
 	if (htmlFor && slot === undefined) {
 		return <LabelContext value={null}>{label}</LabelContext>;

package/src/bases/react-aria/ui/native-select.tsrx

@@ -2,43 +2,51 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 import { ChevronDownIcon } from '@octanejs/lucide';
 
-type NativeSelectProps =
-	Omit<HostProps<'select'>, 'size'> & {
-		size?: 'sm' | 'default';
-	};
+type NativeSelectProps = Omit<HostProps<'select'>, 'size'> & {
+	size?: 'sm' | 'default';
+};
 
 export function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
-	return <div
-		className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
-		data-slot="native-select-wrapper"
-		data-size={size}
-	>
-		<select
-			data-slot="native-select"
+	return (
+		<div
+			className={cn(
+				'group/native-select relative w-fit has-[select:disabled]:opacity-50',
+				className,
+			)}
+			data-slot="native-select-wrapper"
 			data-size={size}
-			className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-			{...props}
-		/>
-		<ChevronDownIcon
-			className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
-			aria-hidden="true"
-			data-slot="native-select-icon"
-		/>
-	</div>;
+		>
+			<select
+				data-slot="native-select"
+				data-size={size}
+				className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+				{...props}
+			/>
+			<ChevronDownIcon
+				className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+				aria-hidden="true"
+				data-slot="native-select-icon"
+			/>
+		</div>
+	);
 }
 
 export function NativeSelectOption({ className, ...props }: HostProps<'option'>) {
-	return <option
-		data-slot="native-select-option"
-		className={cn('bg-[Canvas] text-[CanvasText]', className)}
-		{...props}
-	/>;
+	return (
+		<option
+			data-slot="native-select-option"
+			className={cn('bg-[Canvas] text-[CanvasText]', className)}
+			{...props}
+		/>
+	);
 }
 
 export function NativeSelectOptGroup({ className, ...props }: HostProps<'optgroup'>) {
-	return <optgroup
-		data-slot="native-select-optgroup"
-		className={cn('bg-[Canvas] text-[CanvasText]', className)}
-		{...props}
-	/>;
+	return (
+		<optgroup
+			data-slot="native-select-optgroup"
+			className={cn('bg-[Canvas] text-[CanvasText]', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -4,31 +4,34 @@ import { LinkButton } from './button.tsrx';
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
 
 export function Pagination({ className, ...props }: HostProps<'nav'>) {
-	return <nav
-		role="navigation"
-		aria-label="pagination"
-		data-slot="pagination"
-		className={cn('mx-auto flex w-full justify-center', className)}
-		{...props}
-	/>;
+	return (
+		<nav
+			role="navigation"
+			aria-label="pagination"
+			data-slot="pagination"
+			className={cn('mx-auto flex w-full justify-center', className)}
+			{...props}
+		/>
+	);
 }
 
 export function PaginationContent({ className, ...props }: HostProps<'ul'>) {
-	return <ul
-		data-slot="pagination-content"
-		className={cn('flex items-center gap-0.5', className)}
-		{...props}
-	/>;
+	return (
+		<ul
+			data-slot="pagination-content"
+			className={cn('flex items-center gap-0.5', className)}
+			{...props}
+		/>
+	);
 }
 
 export function PaginationItem({ ...props }: HostProps<'li'>) {
 	return <li data-slot="pagination-item" {...props} />;
 }
 
-type PaginationLinkProps =
-	{
-		isActive?: boolean;
-	} & Omit<Record<string, any>, 'variant'>;
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Omit<Record<string, any>, 'variant'>;
 
 export function PaginationLink({
 	className,
@@ -36,57 +39,70 @@ export function PaginationLink({
 	size = 'icon',
 	...props
 }: PaginationLinkProps) {
-	return <LinkButton
-		variant={isActive ? 'outline' : 'ghost'}
-		size={size}
-		className={cn(className)}
-		aria-current={isActive ? 'page' : undefined}
-		data-slot="pagination-link"
-		data-active={isActive}
-		{...props}
-	/>;
+	return (
+		<LinkButton
+			variant={isActive ? 'outline' : 'ghost'}
+			size={size}
+			className={cn(className)}
+			aria-current={isActive ? 'page' : undefined}
+			data-slot="pagination-link"
+			data-active={isActive}
+			{...props}
+		/>
+	);
 }
 
-export function PaginationPrevious({ className, text = 'Previous', ...props }: Record<
-	string,
-	any
-> & { text?: string }) {
-	return <PaginationLink
-		aria-label="Go to previous page"
-		size="default"
-		className={cn('pl-1.5!', className)}
-		{...props}
-	>
-		<ChevronLeftIcon data-icon="inline-start" />
-		<span className="hidden sm:block">{text}</span>
-	</PaginationLink>;
+export function PaginationPrevious({
+	className,
+	text = 'Previous',
+	...props
+}: Record<string, any> & { text?: string }) {
+	return (
+		<PaginationLink
+			aria-label="Go to previous page"
+			size="default"
+			className={cn('pl-1.5!', className)}
+			{...props}
+		>
+			<ChevronLeftIcon data-icon="inline-start" />
+			<span className="hidden sm:block">{text}</span>
+		</PaginationLink>
+	);
 }
 
-export function PaginationNext({ className, text = 'Next', ...props }: Record<string, any> & {
+export function PaginationNext({
+	className,
+	text = 'Next',
+	...props
+}: Record<string, any> & {
 	text?: string;
 }) {
-	return <PaginationLink
-		aria-label="Go to next page"
-		size="default"
-		className={cn('pr-1.5!', className)}
-		{...props}
-	>
-		<span className="hidden sm:block">{text}</span>
-		<ChevronRightIcon data-icon="inline-end" />
-	</PaginationLink>;
+	return (
+		<PaginationLink
+			aria-label="Go to next page"
+			size="default"
+			className={cn('pr-1.5!', className)}
+			{...props}
+		>
+			<span className="hidden sm:block">{text}</span>
+			<ChevronRightIcon data-icon="inline-end" />
+		</PaginationLink>
+	);
 }
 
 export function PaginationEllipsis({ className, ...props }: HostProps<'span'>) {
-	return <span
-		aria-hidden
-		data-slot="pagination-ellipsis"
-		className={cn(
-			'flex size-8 items-center justify-center [&_svg:not([class*=\'size-\'])]:size-4',
-			className,
-		)}
-		{...props}
-	>
-		<MoreHorizontalIcon />
-		<span className="sr-only">More pages</span>
-	</span>;
+	return (
+		<span
+			aria-hidden
+			data-slot="pagination-ellipsis"
+			className={cn(
+				"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<MoreHorizontalIcon />
+			<span className="sr-only">More pages</span>
+		</span>
+	);
 }

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

@@ -11,7 +11,11 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function PopoverTrigger({ children, ...props }: DialogTriggerProps) {
-	return <DialogTrigger data-slot="popover-trigger" {...props}>{children}</DialogTrigger>;
+	return (
+		<DialogTrigger data-slot="popover-trigger" {...props}>
+			{children}
+		</DialogTrigger>
+	);
 }
 
 export function Popover({
@@ -23,25 +27,29 @@ export function Popover({
 }: Omit<PopoverPrimitiveProps, 'className'> & {
 	className?: string;
 }) {
-	return <PopoverPrimitive
-		data-slot="popover-content"
-		placement={placement}
-		offset={offset}
-		crossOffset={crossOffset}
-		className={cn(
-			'z-50 flex w-72 origin-(--trigger-anchor-point) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<PopoverPrimitive
+			data-slot="popover-content"
+			placement={placement}
+			offset={offset}
+			crossOffset={crossOffset}
+			className={cn(
+				'z-50 flex w-72 origin-(--trigger-anchor-point) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function PopoverHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="popover-header"
-		className={cn('flex flex-col gap-0.5 text-sm', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="popover-header"
+			className={cn('flex flex-col gap-0.5 text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 export function PopoverTitle({ className, ...props }: HeadingProps) {
@@ -49,9 +57,11 @@ export function PopoverTitle({ className, ...props }: HeadingProps) {
 }
 
 export function PopoverDescription({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="popover-description"
-		className={cn('text-muted-foreground', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="popover-description"
+			className={cn('text-muted-foreground', className)}
+			{...props}
+		/>
+	);
 }

package/src/bases/react-aria/ui/radio-group.tsrx

@@ -16,31 +16,38 @@ import {
 import { cn } from 'cn';
 
 export function RadioGroup({ className, ...props }: RadioGroupProps) {
-	return <RadioGroupPrimitive
-		data-slot="radio-group"
-		className={cn('grid w-full gap-2', className)}
-		{...props}
-	/>;
+	return (
+		<RadioGroupPrimitive
+			data-slot="radio-group"
+			className={cn('grid w-full gap-2', className)}
+			{...props}
+		/>
+	);
 }
 
 export function RadioGroupItem({ className, children, ...props }: RadioProps) {
-	return <RadioPrimitive
-		data-slot="radio-group-item"
-		className={cn(
-			'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none 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 }: RadioRenderProps) => <>
-			<span data-slot="radio-group-indicator" className="flex size-4 items-center justify-center">
-				{isSelected &&
+	return (
+		<RadioPrimitive
+			data-slot="radio-group-item"
+			className={cn(
+				'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none 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 }: RadioRenderProps) => (
+				<>
 					<span
-						className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground"
-					/>}
-			</span>
-			{children}
-		</>,
-	)}</RadioPrimitive>;
+						data-slot="radio-group-indicator"
+						className="flex size-4 items-center justify-center"
+					>
+						{isSelected && (
+							<span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+						)}
+					</span>
+					{children}
+				</>
+			))}
+		</RadioPrimitive>
+	);
 }