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

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

@@ -2,39 +2,39 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Skeleton } from '@/components/ui/Skeleton';
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'UI Components/Skeleton',
-  component: Skeleton,
+	title: 'UI Components/Skeleton',
+	component: Skeleton,
 };
 export default meta;
 type Story = StoryObj<typeof Skeleton>;
 
 /** Shows a skeleton mimicking a user profile layout with an avatar circle and two text lines. */
 export const Default: Story = {
-  render: () => (
-    <div className="flex items-center space-x-4">
-      <Skeleton className="h-12 w-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  ),
+	render: () => (
+		<div className="flex items-center space-x-4">
+			<Skeleton className="h-12 w-12 rounded-full" />
+			<div className="space-y-2">
+				<Skeleton className="h-4 w-[250px]" />
+				<Skeleton className="h-4 w-[200px]" />
+			</div>
+		</div>
+	),
 };
 
 /** Shows a skeleton mimicking a full card layout with image, text, and avatar placeholders. */
 export const CardSkeleton: Story = {
-  render: () => (
-    <div className="w-[300px] space-y-4 rounded-lg border p-4">
-      <Skeleton className="h-40 w-full rounded-md" />
-      <div className="space-y-2">
-        <Skeleton className="h-5 w-3/4" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-5/6" />
-      </div>
-      <div className="flex items-center gap-2 pt-2">
-        <Skeleton className="h-8 w-8 rounded-full" />
-        <Skeleton className="h-4 w-24" />
-      </div>
-    </div>
-  ),
+	render: () => (
+		<div className="w-[300px] space-y-4 rounded-lg border p-4">
+			<Skeleton className="h-40 w-full rounded-md" />
+			<div className="space-y-2">
+				<Skeleton className="h-5 w-3/4" />
+				<Skeleton className="h-4 w-full" />
+				<Skeleton className="h-4 w-5/6" />
+			</div>
+			<div className="flex items-center gap-2 pt-2">
+				<Skeleton className="h-8 w-8 rounded-full" />
+				<Skeleton className="h-4 w-24" />
+			</div>
+		</div>
+	),
 };

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

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
  * Use to mirror the shape of upcoming content (e.g., text lines, avatars, cards) and reduce perceived load time.
  */
 function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
+	return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
 }
 
 export { Skeleton };

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

@@ -2,23 +2,23 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Slider } from '@/components/ui/Slider';
 
 const meta: Meta<typeof Slider> = {
-  title: 'UI Components/Slider',
-  component: Slider,
+	title: 'UI Components/Slider',
+	component: Slider,
 };
 export default meta;
 type Story = StoryObj<typeof Slider>;
 
 /** Shows a single-thumb slider at 50% of a 0-100 range. */
 export const Default: Story = {
-  render: () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />,
+	render: () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />,
 };
 
 /** Demonstrates a dual-thumb range slider for selecting a value range between 25 and 75. */
 export const Range: Story = {
-  render: () => <Slider defaultValue={[25, 75]} max={100} step={1} className="w-[60%]" />,
+	render: () => <Slider defaultValue={[25, 75]} max={100} step={1} className="w-[60%]" />,
 };
 
 /** Shows a slider with discrete step increments of 10. */
 export const WithSteps: Story = {
-  render: () => <Slider defaultValue={[20]} max={100} step={10} className="w-[60%]" />,
+	render: () => <Slider defaultValue={[20]} max={100} step={10} className="w-[60%]" />,
 };

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

@@ -1,55 +1,56 @@
-import * as React from 'react';
 import { Slider as SliderPrimitive } from 'radix-ui';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** A draggable range input. Supports single or multiple thumbs (range selection), keyboard navigation, and vertical orientation. */
 function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
-    [value, defaultValue, min, max],
-  );
+	const _values = React.useMemo(
+		() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+		[value, defaultValue, min, max],
+	);
 
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className,
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
+	return (
+		<SliderPrimitive.Root
+			data-slot="slider"
+			defaultValue={defaultValue}
+			value={value}
+			min={min}
+			max={max}
+			className={cn(
+				'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+				className,
+			)}
+			{...props}
+		>
+			<SliderPrimitive.Track
+				data-slot="slider-track"
+				className={cn(
+					'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+				)}
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}
+				/>
+			</SliderPrimitive.Track>
+			{Array.from({ length: _values.length }, (_, index) => (
+				<SliderPrimitive.Thumb
+					data-slot="slider-thumb"
+					// biome-ignore lint/suspicious/noArrayIndexKey: Slider thumbs are positional and have no unique identifiers
+					key={index}
+					className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				/>
+			))}
+		</SliderPrimitive.Root>
+	);
 }
 
 export { Slider };

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

@@ -1,45 +1,45 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ThemeProvider } from 'next-themes';
 import { toast } from 'sonner';
-import { Toaster } from '@/components/ui/Sonner';
 import { Button } from '@/components/ui/Button';
+import { Toaster } from '@/components/ui/Sonner';
 
 const meta: Meta<typeof Toaster> = {
-  title: 'UI Components/Sonner',
-  component: Toaster,
-  decorators: [
-    (Story) => (
-      <ThemeProvider attribute="class" defaultTheme="light">
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
+	title: 'UI Components/Sonner',
+	component: Toaster,
+	decorators: [
+		(Story) => (
+			<ThemeProvider attribute="class" defaultTheme="light">
+				<Story />
+			</ThemeProvider>
+		),
+	],
 };
 export default meta;
 type Story = StoryObj<typeof Toaster>;
 
 /** Demonstrates all toast variants (default, success, error, warning, info) triggered by buttons. */
 export const Default: Story = {
-  render: () => (
-    <div>
-      <Toaster />
-      <div className="flex flex-wrap gap-2">
-        <Button variant="outline" onClick={() => toast('Event has been created.')}>
-          Show Toast
-        </Button>
-        <Button variant="outline" onClick={() => toast.success('Successfully saved!')}>
-          Success
-        </Button>
-        <Button variant="outline" onClick={() => toast.error('Something went wrong.')}>
-          Error
-        </Button>
-        <Button variant="outline" onClick={() => toast.warning('Please check your input.')}>
-          Warning
-        </Button>
-        <Button variant="outline" onClick={() => toast.info('Here is some information.')}>
-          Info
-        </Button>
-      </div>
-    </div>
-  ),
+	render: () => (
+		<div>
+			<Toaster />
+			<div className="flex flex-wrap gap-2">
+				<Button variant="outline" onClick={() => toast('Event has been created.')}>
+					Show Toast
+				</Button>
+				<Button variant="outline" onClick={() => toast.success('Successfully saved!')}>
+					Success
+				</Button>
+				<Button variant="outline" onClick={() => toast.error('Something went wrong.')}>
+					Error
+				</Button>
+				<Button variant="outline" onClick={() => toast.warning('Please check your input.')}>
+					Warning
+				</Button>
+				<Button variant="outline" onClick={() => toast.info('Here is some information.')}>
+					Info
+				</Button>
+			</div>
+		</div>
+	),
 };

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

@@ -9,30 +9,30 @@ import { Toaster as Sonner, type ToasterProps } from 'sonner';
  * Provides styled icons for success, info, warning, error, and loading states. Place once at the app root and trigger toasts via the `toast()` function from sonner.
  */
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
+	const { theme = 'system' } = useTheme();
 
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-          '--border-radius': 'var(--radius)',
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
+	return (
+		<Sonner
+			theme={theme as ToasterProps['theme']}
+			className="toaster group"
+			icons={{
+				success: <CircleCheckIcon className="size-4" />,
+				info: <InfoIcon className="size-4" />,
+				warning: <TriangleAlertIcon className="size-4" />,
+				error: <OctagonXIcon className="size-4" />,
+				loading: <Loader2Icon className="size-4 animate-spin" />,
+			}}
+			style={
+				{
+					'--normal-bg': 'var(--popover)',
+					'--normal-text': 'var(--popover-foreground)',
+					'--normal-border': 'var(--border)',
+					'--border-radius': 'var(--radius)',
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
 };
 
 export { Toaster };

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

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Spinner } from '@/components/ui/Spinner';
 
 const meta: Meta<typeof Spinner> = {
-  title: 'UI Components/Spinner',
-  component: Spinner,
+	title: 'UI Components/Spinner',
+	component: Spinner,
 };
 export default meta;
 type Story = StoryObj<typeof Spinner>;
@@ -13,14 +13,14 @@ export const Default: Story = {};
 
 /** Shows a smaller 12px spinner for inline or compact contexts. */
 export const Small: Story = {
-  args: {
-    className: 'size-3',
-  },
+	args: {
+		className: 'size-3',
+	},
 };
 
 /** Shows a larger 32px spinner for full-page or section-level loading states. */
 export const Large: Story = {
-  args: {
-    className: 'size-8',
-  },
+	args: {
+		className: 'size-8',
+	},
 };

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

@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils';
  * Includes role="status" and an aria-label for accessibility. Resize via className (e.g., "size-8").
  */
 function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  return <Loader2Icon role="status" aria-label="Loading" className={cn('size-4 animate-spin', className)} {...props} />;
+	return <Loader2Icon role="status" aria-label="Loading" className={cn('size-4 animate-spin', className)} {...props} />;
 }
 
 export { Spinner };

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

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Switch } from '@/components/ui/Switch';
 
 const meta: Meta<typeof Switch> = {
-  title: 'UI Components/Switch',
-  component: Switch,
+	title: 'UI Components/Switch',
+	component: Switch,
 };
 export default meta;
 type Story = StoryObj<typeof Switch>;
@@ -14,26 +13,26 @@ export const Default: Story = {};
 
 /** Shows the switch in its checked (on) state. */
 export const Checked: Story = {
-  args: {
-    defaultChecked: true,
-  },
+	args: {
+		defaultChecked: true,
+	},
 };
 
 /** Shows a disabled switch that cannot be interacted with. */
 export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
+	args: {
+		disabled: true,
+	},
 };
 
 /** Shows the switch paired with an associated label element for accessible labeling. */
 export const WithLabel: Story = {
-  render: () => (
-    <div className="flex items-center gap-2">
-      <Switch id="airplane-mode" />
-      <label htmlFor="airplane-mode" className="text-sm">
-        Airplane Mode
-      </label>
-    </div>
-  ),
+	render: () => (
+		<div className="flex items-center gap-2">
+			<Switch id="airplane-mode" />
+			<label htmlFor="airplane-mode" className="text-sm">
+				Airplane Mode
+			</label>
+		</div>
+	),
 };

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

@@ -1,35 +1,35 @@
-import * as React from 'react';
 import { Switch as SwitchPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** A sliding on/off toggle control with WAI-ARIA switch role and keyboard support. */
 function Switch({
-  className,
-  /** Controls the physical dimensions of the switch track and thumb. */
-  size = 'default',
-  ...props
+	className,
+	/** Controls the physical dimensions of the switch track and thumb. */
+	size = 'default',
+	...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-  size?: 'sm' | 'default';
+	size?: 'sm' | 'default';
 }) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      data-size={size}
-      className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
-        className,
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			data-size={size}
+			className={cn(
+				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
 }
 
 export { Switch };

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

@@ -1,67 +1,67 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from '@/components/ui/Table';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/Table';
 
 const meta: Meta<typeof Table> = {
-  title: 'UI Components/Table',
-  component: Table,
+	title: 'UI Components/Table',
+	component: Table,
 };
 export default meta;
 type Story = StoryObj<typeof Table>;
 
 const invoices = [
-  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
-  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
-  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
-  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
+	{ invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
+	{ invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
+	{ invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
+	{ invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
 ];
 
 /** Shows a full table with header, body, and caption using invoice data. */
 export const Default: Story = {
-  render: () => (
-    <Table>
-      <TableCaption>A list of recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.status}</TableCell>
-            <TableCell>{invoice.method}</TableCell>
-            <TableCell className="text-right">{invoice.amount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
+	render: () => (
+		<Table>
+			<TableCaption>A list of recent invoices.</TableCaption>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Invoice</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Method</TableHead>
+					<TableHead className="text-right">Amount</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{invoices.map((invoice) => (
+					<TableRow key={invoice.invoice}>
+						<TableCell className="font-medium">{invoice.invoice}</TableCell>
+						<TableCell>{invoice.status}</TableCell>
+						<TableCell>{invoice.method}</TableCell>
+						<TableCell className="text-right">{invoice.amount}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	),
 };
 
 /** Shows a minimal two-column table without caption or footer. */
 export const Minimal: Story = {
-  render: () => (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Role</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>Alice</TableCell>
-          <TableCell>Engineer</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Bob</TableCell>
-          <TableCell>Designer</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  ),
+	render: () => (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Name</TableHead>
+					<TableHead>Role</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				<TableRow>
+					<TableCell>Alice</TableCell>
+					<TableCell>Engineer</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell>Bob</TableCell>
+					<TableCell>Designer</TableCell>
+				</TableRow>
+			</TableBody>
+		</Table>
+	),
 };