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

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

@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -9,78 +9,78 @@ import { cn } from '@/lib/utils';
  * Compose with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption subcomponents.
  */
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table 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">
+			<table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
+		</div>
+	);
 }
 
 /** The header section of a Table, rendering a thead with bottom-bordered rows. */
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
+	return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
 }
 
 /** The body section of a Table, rendering a tbody with no border on the last row. */
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
+	return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
 }
 
 /** The footer section of a Table, rendering a tfoot with a muted background and top border. */
 function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
-      {...props}
-    />
-  );
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+			{...props}
+		/>
+	);
 }
 
 /** A table row with hover highlight and selected state styling via data-state="selected". */
 function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
-      {...props}
-    />
-  );
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
+			{...props}
+		/>
+	);
 }
 
 /** A table header cell with bold text and left alignment. Automatically adjusts padding when containing a checkbox. */
 function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A table data cell with standard padding and vertical alignment. */
 function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A table caption rendered below the table body in muted text. */
 function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  return (
-    <caption data-slot="table-caption" className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
-  );
+	return (
+		<caption data-slot="table-caption" className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
+	);
 }
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -1,53 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/Tabs';
 
 const meta: Meta<typeof Tabs> = {
-  title: 'UI Components/Tabs',
-  component: Tabs,
+	title: 'UI Components/Tabs',
+	component: Tabs,
 };
 export default meta;
 type Story = StoryObj<typeof Tabs>;
 
 /** Shows the default pill-style tabs with three panels. */
 export const Default: Story = {
-  render: () => (
-    <Tabs defaultValue="account" className="w-[400px]">
-      <TabsList>
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-        <TabsTrigger value="settings">Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <p className="text-sm text-muted-foreground p-4">Make changes to your account here.</p>
-      </TabsContent>
-      <TabsContent value="password">
-        <p className="text-sm text-muted-foreground p-4">Change your password here.</p>
-      </TabsContent>
-      <TabsContent value="settings">
-        <p className="text-sm text-muted-foreground p-4">Adjust your settings here.</p>
-      </TabsContent>
-    </Tabs>
-  ),
+	render: () => (
+		<Tabs defaultValue="account" className="w-[400px]">
+			<TabsList>
+				<TabsTrigger value="account">Account</TabsTrigger>
+				<TabsTrigger value="password">Password</TabsTrigger>
+				<TabsTrigger value="settings">Settings</TabsTrigger>
+			</TabsList>
+			<TabsContent value="account">
+				<p className="text-sm text-muted-foreground p-4">Make changes to your account here.</p>
+			</TabsContent>
+			<TabsContent value="password">
+				<p className="text-sm text-muted-foreground p-4">Change your password here.</p>
+			</TabsContent>
+			<TabsContent value="settings">
+				<p className="text-sm text-muted-foreground p-4">Adjust your settings here.</p>
+			</TabsContent>
+		</Tabs>
+	),
 };
 
 /** Shows the line variant where the active tab is indicated by an underline rather than a background. */
 export const LineVariant: Story = {
-  render: () => (
-    <Tabs defaultValue="overview" className="w-[400px]">
-      <TabsList variant="line">
-        <TabsTrigger value="overview">Overview</TabsTrigger>
-        <TabsTrigger value="analytics">Analytics</TabsTrigger>
-        <TabsTrigger value="reports">Reports</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview">
-        <p className="text-sm text-muted-foreground p-4">Overview content goes here.</p>
-      </TabsContent>
-      <TabsContent value="analytics">
-        <p className="text-sm text-muted-foreground p-4">Analytics content goes here.</p>
-      </TabsContent>
-      <TabsContent value="reports">
-        <p className="text-sm text-muted-foreground p-4">Reports content goes here.</p>
-      </TabsContent>
-    </Tabs>
-  ),
+	render: () => (
+		<Tabs defaultValue="overview" className="w-[400px]">
+			<TabsList variant="line">
+				<TabsTrigger value="overview">Overview</TabsTrigger>
+				<TabsTrigger value="analytics">Analytics</TabsTrigger>
+				<TabsTrigger value="reports">Reports</TabsTrigger>
+			</TabsList>
+			<TabsContent value="overview">
+				<p className="text-sm text-muted-foreground p-4">Overview content goes here.</p>
+			</TabsContent>
+			<TabsContent value="analytics">
+				<p className="text-sm text-muted-foreground p-4">Analytics content goes here.</p>
+			</TabsContent>
+			<TabsContent value="reports">
+				<p className="text-sm text-muted-foreground p-4">Reports content goes here.</p>
+			</TabsContent>
+		</Tabs>
+	),
 };

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

@@ -1,75 +1,75 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Tabs as TabsPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** Layered content panels activated by tab triggers. Supports horizontal and vertical orientations with keyboard navigation. */
 function Tabs({ className, orientation = 'horizontal', ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      orientation={orientation}
-      className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
-      {...props}
-    />
-  );
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			orientation={orientation}
+			className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+			{...props}
+		/>
+	);
 }
 
 const tabsListVariants = cva(
-  'rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted',
-        line: 'gap-1 bg-transparent',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	'rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+	{
+		variants: {
+			variant: {
+				default: 'bg-muted',
+				line: 'gap-1 bg-transparent',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
 );
 
 /**
  * The container for tab triggers. Supports "default" (pill background) and "line" (underline indicator) variants.
  */
 function TabsList({
-  className,
-  variant = 'default',
-  ...props
+	className,
+	variant = 'default',
+	...props
 }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  );
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }
 
 /** A clickable tab button that activates its associated TabsContent panel. */
 function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=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-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
-        'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
-        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=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-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
+				'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
+				'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The content panel associated with a tab trigger, shown when its corresponding trigger is active. */
 function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />;
+	return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />;
 }
 
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Textarea } from '@/components/ui/Textarea';
 
 const meta: Meta<typeof Textarea> = {
-  title: 'UI Components/Textarea',
-  component: Textarea,
+	title: 'UI Components/Textarea',
+	component: Textarea,
 };
 export default meta;
 type Story = StoryObj<typeof Textarea>;
@@ -13,15 +13,15 @@ export const Default: Story = {};
 
 /** Shows the textarea with placeholder text. */
 export const WithPlaceholder: Story = {
-  args: {
-    placeholder: 'Type your message here...',
-  },
+	args: {
+		placeholder: 'Type your message here...',
+	},
 };
 
 /** Shows a disabled textarea that cannot receive input. */
 export const Disabled: Story = {
-  args: {
-    placeholder: 'This textarea is disabled',
-    disabled: true,
-  },
+	args: {
+		placeholder: 'This textarea is disabled',
+		disabled: true,
+	},
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -7,16 +7,16 @@ import { cn } from '@/lib/utils';
  * Supports aria-invalid styling for form validation errors.
  */
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export { Textarea };

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

@@ -1,116 +1,116 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '@/components/ui/Button';
 import {
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
+	Toast,
+	ToastAction,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
 } from '@/components/ui/Toast';
 import { Toaster } from '@/components/ui/Toaster';
 import { useToast } from '@/hooks/use-toast';
 
 const meta: Meta<typeof Toast> = {
-  title: 'UI Components/Toast',
-  component: Toast,
+	title: 'UI Components/Toast',
+	component: Toast,
 };
 export default meta;
 type Story = StoryObj<typeof Toast>;
 
 function ToastDemo() {
-  const { toast } = useToast();
+	const { toast } = useToast();
 
-  return (
-    <div>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => {
-          toast({
-            title: 'UI Components/Scheduled: Catch up',
-            description: 'Friday, February 10, 2026 at 5:57 PM',
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </div>
-  );
+	return (
+		<div>
+			<Toaster />
+			<Button
+				variant="outline"
+				onClick={() => {
+					toast({
+						title: 'UI Components/Scheduled: Catch up',
+						description: 'Friday, February 10, 2026 at 5:57 PM',
+					});
+				}}
+			>
+				Show Toast
+			</Button>
+		</div>
+	);
 }
 
 /** Demonstrates triggering a basic toast notification with a title and description. */
 export const Default: Story = {
-  render: () => <ToastDemo />,
+	render: () => <ToastDemo />,
 };
 
 function ToastDestructiveDemo() {
-  const { toast } = useToast();
+	const { toast } = useToast();
 
-  return (
-    <div>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => {
-          toast({
-            variant: 'destructive',
-            title: 'UI Components/Uh oh! Something went wrong.',
-            description: 'There was a problem with your request.',
-          });
-        }}
-      >
-        Show Destructive Toast
-      </Button>
-    </div>
-  );
+	return (
+		<div>
+			<Toaster />
+			<Button
+				variant="outline"
+				onClick={() => {
+					toast({
+						variant: 'destructive',
+						title: 'UI Components/Uh oh! Something went wrong.',
+						description: 'There was a problem with your request.',
+					});
+				}}
+			>
+				Show Destructive Toast
+			</Button>
+		</div>
+	);
 }
 
 /** Shows a destructive-variant toast for error or warning scenarios. */
 export const Destructive: Story = {
-  render: () => <ToastDestructiveDemo />,
+	render: () => <ToastDestructiveDemo />,
 };
 
 function ToastWithActionDemo() {
-  const { toast } = useToast();
+	const { toast } = useToast();
 
-  return (
-    <div>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => {
-          toast({
-            title: 'UI Components/Event created',
-            description: 'Sunday, December 03, 2023 at 9:00 AM',
-            action: <ToastAction altText="Undo">Undo</ToastAction>,
-          });
-        }}
-      >
-        Show Toast with Action
-      </Button>
-    </div>
-  );
+	return (
+		<div>
+			<Toaster />
+			<Button
+				variant="outline"
+				onClick={() => {
+					toast({
+						title: 'UI Components/Event created',
+						description: 'Sunday, December 03, 2023 at 9:00 AM',
+						action: <ToastAction altText="Undo">Undo</ToastAction>,
+					});
+				}}
+			>
+				Show Toast with Action
+			</Button>
+		</div>
+	);
 }
 
 /** Shows a toast with an action button (e.g., "Undo") alongside the message. */
 export const WithAction: Story = {
-  render: () => <ToastWithActionDemo />,
+	render: () => <ToastWithActionDemo />,
 };
 
 /** Shows a toast rendered inline (always open) using the primitive subcomponents directly. */
 export const Inline: Story = {
-  render: () => (
-    <ToastProvider>
-      <Toast open>
-        <div className="grid gap-1">
-          <ToastTitle>Toast Title</ToastTitle>
-          <ToastDescription>This is a toast description.</ToastDescription>
-        </div>
-        <ToastClose />
-      </Toast>
-      <ToastViewport />
-    </ToastProvider>
-  ),
+	render: () => (
+		<ToastProvider>
+			<Toast open>
+				<div className="grid gap-1">
+					<ToastTitle>Toast Title</ToastTitle>
+					<ToastDescription>This is a toast description.</ToastDescription>
+				</div>
+				<ToastClose />
+			</Toast>
+			<ToastViewport />
+		</ToastProvider>
+	),
 };