@octanejs/shadcn 0.0.52 → 0.0.53

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

@@ -21,119 +21,143 @@ export function AlertDialogTrigger({ ...props }: AlertDialogTriggerPrimitiveProp
 	return <AlertDialogTriggerPrimitive data-slot="alert-dialog-trigger" {...props} />;
 }
 
-export function AlertDialogOverlay({ className, children, ...props }: Omit<
-	ModalOverlayPrimitiveProps,
-	'className' | 'children'
-> & {
+export function AlertDialogOverlay({
+	className,
+	children,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & {
 	className?: string;
 	children: OctaneNode;
 }) {
-	return <ModalOverlayPrimitive
-		data-slot="alert-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="alert-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 AlertDialog({ className, size = 'default', children, ...props }: Omit<
-	ModalOverlayPrimitiveProps,
-	'className' | 'children'
-> & { isDismissable?: boolean } & {
+export function AlertDialog({
+	className,
+	size = 'default',
+	children,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & { isDismissable?: boolean } & {
 	className?: string;
 	size?: 'default' | 'sm';
 	children: OctaneNode;
 }) {
-	return <AlertDialogOverlay {...props}>
-		<ModalPrimitive
-			data-slot="alert-dialog-content"
-			data-size={size}
-			className={cn(
-				'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 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 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
-				className,
-			)}
-		>
-			<AlertDialogPrimitive
-				data-slot="alert-dialog"
-				role="alertdialog"
-				className="[display:inherit] [gap:inherit] outline-none"
-			>{children}</AlertDialogPrimitive>
-		</ModalPrimitive>
-	</AlertDialogOverlay>;
+	return (
+		<AlertDialogOverlay {...props}>
+			<ModalPrimitive
+				data-slot="alert-dialog-content"
+				data-size={size}
+				className={cn(
+					'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 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 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
+					className,
+				)}
+			>
+				<AlertDialogPrimitive
+					data-slot="alert-dialog"
+					role="alertdialog"
+					className="[display:inherit] [gap:inherit] outline-none"
+				>
+					{children}
+				</AlertDialogPrimitive>
+			</ModalPrimitive>
+		</AlertDialogOverlay>
+	);
 }
 
-export function AlertDialogContent({ className, size = 'default', children, ...props }: Record<
-	string,
-	any
->) {
-	return <AlertDialog className={className} size={size} {...props}>{children}</AlertDialog>;
+export function AlertDialogContent({
+	className,
+	size = 'default',
+	children,
+	...props
+}: Record<string, any>) {
+	return (
+		<AlertDialog className={className} size={size} {...props}>
+			{children}
+		</AlertDialog>
+	);
 }
 
 export function AlertDialogHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="alert-dialog-header"
-		className={cn(
-			'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="alert-dialog-header"
+			className={cn(
+				'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertDialogFooter({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="alert-dialog-footer"
-		className={cn(
-			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="alert-dialog-footer"
+			className={cn(
+				'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertDialogMedia({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="alert-dialog-media"
-		className={cn(
-			'mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=\'size-\'])]:size-6',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="alert-dialog-media"
+			className={cn(
+				"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertDialogTitle({ className, ...props }: Omit<HeadingProps, 'slot'>) {
-	return <Heading
-		slot="title"
-		data-slot="alert-dialog-title"
-		className={cn(
-			'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<Heading
+			slot="title"
+			data-slot="alert-dialog-title"
+			className={cn(
+				'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertDialogDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
-	return <div
-		data-slot="alert-dialog-description"
-		className={cn(
-			'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="alert-dialog-description"
+			className={cn(
+				'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertDialogAction({ className, ...props }: Record<string, any>) {
-	return <Button
-		slot="close"
-		data-slot="alert-dialog-action"
-		className={cn(className)}
-		{...props}
-	/>;
+	return (
+		<Button slot="close" data-slot="alert-dialog-action" className={cn(className)} {...props} />
+	);
 }
 
 export function AlertDialogCancel({
@@ -142,12 +166,14 @@ export function AlertDialogCancel({
 	size = 'default',
 	...props
 }: Record<string, any>) {
-	return <Button
-		slot="close"
-		data-slot="alert-dialog-cancel"
-		className={cn(className)}
-		variant={variant}
-		size={size}
-		{...props}
-	/>;
+	return (
+		<Button
+			slot="close"
+			data-slot="alert-dialog-cancel"
+			className={cn(className)}
+			variant={variant}
+			size={size}
+			{...props}
+		/>
+	);
 }

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

@@ -4,12 +4,13 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 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: {
@@ -18,43 +19,49 @@ const alertVariants = cva(
 	},
 );
 
-export function Alert({ className, variant, ...props }: HostProps<'div'> & VariantProps<
-	typeof alertVariants
->) {
-	return <div
-		data-slot="alert"
-		role="alert"
-		className={cn(alertVariants({ variant }), className)}
-		{...props}
-	/>;
+export function Alert({
+	className,
+	variant,
+	...props
+}: HostProps<'div'> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertTitle({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="alert-title"
-		className={cn(
-			'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertDescription({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="alert-description"
-		className={cn(
-			'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AlertAction({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="alert-action"
-		className={cn('absolute top-2 right-2', className)}
-		{...props}
-	/>;
+	return (
+		<div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
+	);
 }

package/src/bases/react-aria/ui/aspect-ratio.tsrx

@@ -2,12 +2,16 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function AspectRatio({ ratio, className, ...props }: HostProps<'div'> & { ratio: number }) {
-	return <div
-		data-slot="aspect-ratio"
-		style={{
-			'--ratio': ratio,
-		} as Record<string, string | number>}
-		className={cn('relative aspect-(--ratio)', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="aspect-ratio"
+			style={
+				{
+					'--ratio': ratio,
+				} as Record<string, string | number>
+			}
+			className={cn('relative aspect-(--ratio)', className)}
+			{...props}
+		/>
+	);
 }

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

@@ -3,81 +3,97 @@ import { useState } from 'octane';
 import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
-export function Avatar({ className, size = 'default', ...props }: HostProps<'div'> & {
+export function Avatar({
+	className,
+	size = 'default',
+	...props
+}: HostProps<'div'> & {
 	size?: 'default' | 'sm' | 'lg';
 }) {
-	return <div
-		data-slot="avatar"
-		data-size={size}
-		className={cn(
-			'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="avatar"
+			data-size={size}
+			className={cn(
+				'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 type ImageState = 'loading' | 'loaded' | 'error';
 
 export function AvatarImage({ className, ...props }: HostProps<'img'>) {
 	const [state, setState] = useState<ImageState>(props.src ? 'loading' : 'error');
-	return <img
-		data-slot="avatar-image"
-		alt={props.alt || ''}
-		data-state={state}
-		onLoad={() => setState('loaded')}
-		onError={() => setState('error')}
-		className={cn(
-			'peer aspect-square size-full rounded-full object-cover data-[state=error]:hidden',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<img
+			data-slot="avatar-image"
+			alt={props.alt || ''}
+			data-state={state}
+			onLoad={() => setState('loaded')}
+			onError={() => setState('error')}
+			className={cn(
+				'peer aspect-square size-full rounded-full object-cover data-[state=error]:hidden',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AvatarFallback({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="avatar-fallback"
-		className={cn(
-			'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs peer-data-[state=error]:flex peer-[*]:hidden',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="avatar-fallback"
+			className={cn(
+				'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs peer-data-[state=error]:flex peer-[*]:hidden',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AvatarBadge({ className, ...props }: HostProps<'span'>) {
-	return <span
-		data-slot="avatar-badge"
-		className={cn(
-			'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
-			'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
-			'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
-			'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<span
+			data-slot="avatar-badge"
+			className={cn(
+				'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+				'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+				'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+				'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AvatarGroup({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="avatar-group"
-		className={cn(
-			'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="avatar-group"
+			className={cn(
+				'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function AvatarGroupCount({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="avatar-group-count"
-		className={cn(
-			'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="avatar-group-count"
+			className={cn(
+				'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }

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

@@ -11,7 +11,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',
@@ -23,11 +24,15 @@ export const badgeVariants = cva(
 	},
 );
 
-export function Badge({ className, variant = 'default', render, ...props }: HostProps<
-	'span'
-> & VariantProps<typeof badgeVariants> & {
-	render?: (props: Record<string, unknown>) => OctaneNode;
-}) {
+export function Badge({
+	className,
+	variant = 'default',
+	render,
+	...props
+}: HostProps<'span'> &
+	VariantProps<typeof badgeVariants> & {
+		render?: (props: Record<string, unknown>) => OctaneNode;
+	}) {
 	if (render) {
 		const renderProps = {
 			'data-slot': 'badge',
@@ -39,10 +44,12 @@ export function Badge({ className, variant = 'default', render, ...props }: Host
 		return render(renderProps);
 	}
 
-	return <span
-		data-slot="badge"
-		data-variant={variant}
-		className={cn(badgeVariants({ variant }), className)}
-		{...props}
-	/>;
+	return (
+		<span
+			data-slot="badge"
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }