@auto-engineer/generate-react-client 1.63.0 → 1.65.0

package/dist/starter/src/components/ui/AlertDialog.tsx

@@ -1,38 +1,37 @@
 'use client';
 
-import * as React from 'react';
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
 import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
 
 /** A confirmation modal requiring explicit user action. Unlike Dialog, cannot be dismissed by clicking outside. */
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 /** The element that opens the AlertDialog when clicked. */
 function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
 /** Portals the dialog content into document.body to avoid z-index and overflow issues. */
 function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
 /** The semi-transparent backdrop rendered behind the dialog content. */
 function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-overlay"
+			className={cn(
+				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /**
@@ -40,139 +39,139 @@ function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof
  * @param size - Controls the max-width: `"default"` for standard dialogs, `"sm"` for compact confirmations.
  */
 function AlertDialogContent({
-  className,
-  size = 'default',
-  ...props
+	className,
+	size = 'default',
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
-  size?: 'default' | 'sm';
+	size?: 'default' | 'sm';
 }) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				data-size={size}
+				className={cn(
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
 }
 
 /** Layout container for the dialog's title, description, and optional media icon. */
 function AlertDialogHeader({ className, ...props }: React.ComponentProps<'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-6 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-6 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}
+		/>
+	);
 }
 
 /** Layout container for the dialog's action buttons, typically Cancel and a primary action. */
 function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        'flex flex-col-reverse gap-2 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(
+				'flex flex-col-reverse gap-2 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}
+		/>
+	);
 }
 
 /** The accessible title of the dialog, announced by screen readers when the dialog opens. */
 function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        'text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn(
+				'text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The accessible description providing additional context about the dialog's purpose. */
 function AlertDialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
+	return (
+		<AlertDialogPrimitive.Description
+			data-slot="alert-dialog-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 /** An optional icon or image slot displayed alongside the title in the dialog header. */
 function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="alert-dialog-media"
+			className={cn(
+				"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The primary confirmation button that closes the dialog and triggers the intended action. Renders as a Button. */
 function AlertDialogAction({
-  className,
-  variant = 'default',
-  size = 'default',
-  ...props
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(className)} {...props} />
-    </Button>
-  );
+	Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+	return (
+		<Button variant={variant} size={size} asChild>
+			<AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(className)} {...props} />
+		</Button>
+	);
 }
 
 /** The cancel button that dismisses the dialog without taking action. Renders as an outline Button by default. */
 function AlertDialogCancel({
-  className,
-  variant = 'outline',
-  size = 'default',
-  ...props
+	className,
+	variant = 'outline',
+	size = 'default',
+	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
-    </Button>
-  );
+	Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+	return (
+		<Button variant={variant} size={size} asChild>
+			<AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
+		</Button>
+	);
 }
 
 export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogMedia,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 };

package/dist/starter/src/components/ui/AspectRatio.stories.tsx

@@ -2,34 +2,34 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { AspectRatio } from '@/components/ui/AspectRatio';
 
 const meta: Meta<typeof AspectRatio> = {
-  title: 'UI Components/AspectRatio',
-  component: AspectRatio,
+	title: 'UI Components/AspectRatio',
+	component: AspectRatio,
 };
 export default meta;
 type Story = StoryObj<typeof AspectRatio>;
 
 /** Shows a 16:9 widescreen aspect ratio container. */
 export const Default: Story = {
-  render: () => (
-    <div className="w-[450px]">
-      <AspectRatio ratio={16 / 9}>
-        <div className="flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800">
-          <span className="text-sm text-slate-500">16:9 Aspect Ratio</span>
-        </div>
-      </AspectRatio>
-    </div>
-  ),
+	render: () => (
+		<div className="w-[450px]">
+			<AspectRatio ratio={16 / 9}>
+				<div className="flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800">
+					<span className="text-sm text-slate-500">16:9 Aspect Ratio</span>
+				</div>
+			</AspectRatio>
+		</div>
+	),
 };
 
 /** Shows a 1:1 square aspect ratio container. */
 export const Square: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <AspectRatio ratio={1}>
-        <div className="flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800">
-          <span className="text-sm text-slate-500">1:1 Square</span>
-        </div>
-      </AspectRatio>
-    </div>
-  ),
+	render: () => (
+		<div className="w-[300px]">
+			<AspectRatio ratio={1}>
+				<div className="flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800">
+					<span className="text-sm text-slate-500">1:1 Square</span>
+				</div>
+			</AspectRatio>
+		</div>
+	),
 };

package/dist/starter/src/components/ui/AspectRatio.tsx

@@ -7,7 +7,7 @@ import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
  * Useful for responsive images, videos, and media containers that must maintain proportions.
  */
 function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+	return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
 }
 
 export { AspectRatio };

package/dist/starter/src/components/ui/Avatar.stories.tsx

@@ -1,45 +1,45 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/Avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar';
 
 const meta: Meta<typeof Avatar> = {
-  title: 'UI Components/Avatar',
-  component: Avatar,
+	title: 'UI Components/Avatar',
+	component: Avatar,
 };
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
 /** Shows an avatar with a loaded profile image and fallback initials. */
 export const WithImage: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
+	render: () => (
+		<Avatar>
+			<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+			<AvatarFallback>CN</AvatarFallback>
+		</Avatar>
+	),
 };
 
 /** Shows an avatar displaying only fallback initials without an image. */
 export const FallbackOnly: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarFallback>AB</AvatarFallback>
-    </Avatar>
-  ),
+	render: () => (
+		<Avatar>
+			<AvatarFallback>AB</AvatarFallback>
+		</Avatar>
+	),
 };
 
 /** Demonstrates the three available avatar sizes: sm, default, and lg. */
 export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Avatar size="sm">
-        <AvatarFallback>SM</AvatarFallback>
-      </Avatar>
-      <Avatar size="default">
-        <AvatarFallback>MD</AvatarFallback>
-      </Avatar>
-      <Avatar size="lg">
-        <AvatarFallback>LG</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
+	render: () => (
+		<div className="flex items-center gap-4">
+			<Avatar size="sm">
+				<AvatarFallback>SM</AvatarFallback>
+			</Avatar>
+			<Avatar size="default">
+				<AvatarFallback>MD</AvatarFallback>
+			</Avatar>
+			<Avatar size="lg">
+				<AvatarFallback>LG</AvatarFallback>
+			</Avatar>
+		</div>
+	),
 };

package/dist/starter/src/components/ui/Avatar.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Avatar as AvatarPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -9,90 +9,90 @@ import { cn } from '@/lib/utils';
  * Use AvatarGroup to render overlapping stacks of avatars.
  */
 function Avatar({
-  className,
-  /** Controls the avatar dimensions: `"sm"` (24px), `"default"` (32px), or `"lg"` (40px). */
-  size = 'default',
-  ...props
+	className,
+	/** Controls the avatar dimensions: `"sm"` (24px), `"default"` (32px), or `"lg"` (40px). */
+	size = 'default',
+	...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: 'default' | 'sm' | 'lg';
+	size?: 'default' | 'sm' | 'lg';
 }) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			data-size={size}
+			className={cn(
+				'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The profile image rendered inside an Avatar. Automatically hidden if the image fails to load. */
 function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
-  );
+	return (
+		<AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
+	);
 }
 
 /** Fallback content shown when AvatarImage is loading or unavailable, typically initials or an icon. */
 function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A small status indicator (e.g., online/offline dot) positioned at the bottom-right corner of an Avatar. */
 function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 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(
+				'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 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}
+		/>
+	);
 }
 
 /** Renders multiple Avatars in an overlapping horizontal stack with ring borders. */
 function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="avatar-group"
+			className={cn(
+				'*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Displays a count of additional avatars not shown in the group (e.g., "+5"). */
 function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 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(
+				'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 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}
+		/>
+	);
 }
 
 export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/starter/src/components/ui/Badge.stories.tsx

@@ -2,40 +2,40 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from '@/components/ui/Badge';
 
 const meta: Meta<typeof Badge> = {
-  title: 'UI Components/Badge',
-  component: Badge,
+	title: 'UI Components/Badge',
+	component: Badge,
 };
 export default meta;
 type Story = StoryObj<typeof Badge>;
 
 /** Shows the primary filled badge variant. */
 export const Default: Story = {
-  render: () => <Badge>Default</Badge>,
+	render: () => <Badge>Default</Badge>,
 };
 
 /** Shows the secondary badge variant with muted background. */
 export const Secondary: Story = {
-  render: () => <Badge variant="secondary">Secondary</Badge>,
+	render: () => <Badge variant="secondary">Secondary</Badge>,
 };
 
 /** Shows the destructive badge variant for error or warning indicators. */
 export const Destructive: Story = {
-  render: () => <Badge variant="destructive">Destructive</Badge>,
+	render: () => <Badge variant="destructive">Destructive</Badge>,
 };
 
 /** Shows the outline badge variant with a visible border and no fill. */
 export const Outline: Story = {
-  render: () => <Badge variant="outline">Outline</Badge>,
+	render: () => <Badge variant="outline">Outline</Badge>,
 };
 
 /** Displays all badge variants side by side for visual comparison. */
 export const AllVariants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="default">Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="destructive">Destructive</Badge>
-      <Badge variant="outline">Outline</Badge>
-    </div>
-  ),
+	render: () => (
+		<div className="flex flex-wrap gap-2">
+			<Badge variant="default">Default</Badge>
+			<Badge variant="secondary">Secondary</Badge>
+			<Badge variant="destructive">Destructive</Badge>
+			<Badge variant="outline">Outline</Badge>
+		</div>
+	),
 };