@octanejs/shadcn 0.0.52 → 0.0.53

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

@@ -4,22 +4,26 @@ import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function Empty({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="empty"
-		className={cn(
-			'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="empty"
+			className={cn(
+				'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function EmptyHeader({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="empty-header"
-		className={cn('flex max-w-sm flex-col items-center gap-2', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="empty-header"
+			className={cn('flex max-w-sm flex-col items-center gap-2', className)}
+			{...props}
+		/>
+	);
 }
 
 const emptyMediaVariants = cva(
@@ -28,7 +32,7 @@ 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: {
@@ -37,43 +41,53 @@ const emptyMediaVariants = cva(
 	},
 );
 
-export function EmptyMedia({ className, variant = 'default', ...props }: HostProps<
-	'div'
-> & VariantProps<typeof emptyMediaVariants>) {
-	return <div
-		data-slot="empty-icon"
-		data-variant={variant}
-		className={cn(emptyMediaVariants({ variant, className }))}
-		{...props}
-	/>;
+export function EmptyMedia({
+	className,
+	variant = 'default',
+	...props
+}: HostProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+	return (
+		<div
+			data-slot="empty-icon"
+			data-variant={variant}
+			className={cn(emptyMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
 }
 
 export function EmptyTitle({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="empty-title"
-		className={cn('text-sm font-medium tracking-tight', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="empty-title"
+			className={cn('text-sm font-medium tracking-tight', className)}
+			{...props}
+		/>
+	);
 }
 
 export function EmptyDescription({ className, ...props }: HostProps<'p'>) {
-	return <div
-		data-slot="empty-description"
-		className={cn(
-			'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="empty-description"
+			className={cn(
+				'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function EmptyContent({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="empty-content"
-		className={cn(
-			'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="empty-content"
+			className={cn(
+				'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }

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

@@ -7,47 +7,59 @@ import { Label } from './label.tsrx';
 import { Separator } from './separator.tsrx';
 
 export function FieldSet({ className, ...props }: HostProps<'fieldset'>) {
-	return <fieldset
-		data-slot="field-set"
-		className={cn(
-			'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export function FieldLegend({ className, variant = 'legend', ...props }: HostProps<'legend'> & {
+export function FieldLegend({
+	className,
+	variant = 'legend',
+	...props
+}: HostProps<'legend'> & {
 	variant?: 'legend' | 'label';
 }) {
-	return <legend
-		data-slot="field-legend"
-		data-variant={variant}
-		className={cn(
-			'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function FieldGroup({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="field-group"
-		className={cn(
-			'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
 	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: {
@@ -55,84 +67,110 @@ const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:tex
 	},
 });
 
-export function Field({ className, orientation = 'vertical', ...props }: HostProps<
-	'div'
-> & VariantProps<typeof fieldVariants>) {
-	return <div
-		role="group"
-		data-slot="field"
-		data-orientation={orientation}
-		className={cn(fieldVariants({ orientation }), className)}
-		{...props}
-	/>;
+export function Field({
+	className,
+	orientation = 'vertical',
+	...props
+}: HostProps<'div'> & VariantProps<typeof fieldVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
 }
 
 export function FieldContent({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="field-content"
-		className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="field-content"
+			className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+			{...props}
+		/>
+	);
 }
 
 export function FieldLabel({ className, ...props }: Record<string, any>) {
-	return <Label
-		data-slot="field-label"
-		className={cn(
-			'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-data-selected:border-primary/30 has-data-selected:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 dark:has-data-selected:border-primary/20 dark:has-data-selected:bg-primary/10',
-			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-data-selected:border-primary/30 has-data-selected:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 dark:has-data-selected:border-primary/20 dark:has-data-selected:bg-primary/10',
+				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function FieldTitle({ className, ...props }: HostProps<'div'>) {
-	return <div
-		data-slot="field-label"
-		className={cn(
-			'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export function FieldDescription({ className, ...props }: HostProps<'p'>) {
-	return <p
-		data-slot="field-description"
-		className={cn(
-			'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
-			'last:mt-0 nth-last-2:-mt-1',
-			'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-			className,
-		)}
-		{...props}
-	/>;
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+				'last:mt-0 nth-last-2:-mt-1',
+				'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export function FieldSeparator({ children, className, ...props }: HostProps<'div'> & {
+export function FieldSeparator({
+	children,
+	className,
+	...props
+}: HostProps<'div'> & {
 	children?: OctaneNode;
 }) {
-	return <div
-		data-slot="field-separator"
-		data-content={!!children}
-		className={cn(
-			'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-			className,
-		)}
-		{...props}
-	>
-		<Separator className="absolute inset-0 top-1/2" />
-		{children &&
-			<span
-				className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
-				data-slot="field-separator-content"
-			>{children}</span>}
-	</div>;
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+				className,
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	);
 }
 
-export function FieldError({ className, children, errors, ...props }: HostProps<'div'> & {
+export function FieldError({
+	className,
+	children,
+	errors,
+	...props
+}: HostProps<'div'> & {
 	errors?: Array<{ message?: string } | undefined>;
 }) {
 	const content = useMemo(() => {
@@ -144,27 +182,31 @@ export function FieldError({ className, children, errors, ...props }: HostProps<
 			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 <ul className="ml-4 flex list-disc flex-col gap-1">{uniqueErrors.map(
-			(error, index) => error?.message && <li key={index}>{error.message}</li>,
-		)}</ul>;
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+			</ul>
+		);
 	}, [children, errors]);
 
 	if (!content) {
 		return null;
 	}
 
-	return <div
-		role="alert"
-		data-slot="field-error"
-		className={cn('text-sm font-normal text-destructive', className)}
-		{...props}
-	>{content}</div>;
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn('text-sm font-normal text-destructive', className)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
 }

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

@@ -16,9 +16,8 @@ export function Input({ className, type, ...props }: InputProps) @{
 	<InputPrimitive
 		type={type}
 		data-slot="input"
-		className={composeRenderProps(
-			className,
-			(resolved: string | undefined) => cn(
+		className={composeRenderProps(className, (resolved: string | undefined) =>
+			cn(
 				'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-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 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,
 			),