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

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

@@ -1,27 +1,27 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 [a&]:hover:underline',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+				ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 [a&]:hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
 );
 
 /**
@@ -29,17 +29,17 @@ const badgeVariants = cva(
  * Supports multiple visual variants: default, secondary, destructive, outline, ghost, and link.
  */
 function Badge({
-  className,
-  variant = 'default',
-  /** Merges props onto the child element instead of rendering a span. Use with custom wrapper elements. */
-  asChild = false,
-  ...props
+	className,
+	variant = 'default',
+	/** Merges props onto the child element instead of rendering a span. Use with custom wrapper elements. */
+	asChild = false,
+	...props
 }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : 'span';
+	const Comp = asChild ? Slot.Root : 'span';
 
-  return (
-    <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+	return (
+		<Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
 export { Badge, badgeVariants };

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

@@ -1,54 +1,54 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
 } from '@/components/ui/Breadcrumb';
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'UI Components/Breadcrumb',
-  component: Breadcrumb,
+	title: 'UI Components/Breadcrumb',
+	component: Breadcrumb,
 };
 export default meta;
 type Story = StoryObj<typeof Breadcrumb>;
 
 /** Shows a three-level breadcrumb trail with home, category, and current page. */
 export const Default: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
+	render: () => (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink href="/">Home</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbLink href="/components">Components</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	),
 };
 
 /** Shows a minimal two-level breadcrumb with just a parent link and current page. */
 export const TwoLevels: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Settings</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
+	render: () => (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbPage>Settings</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	),
 };

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import { Slot } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -10,95 +10,96 @@ import { cn } from '@/lib/utils';
  * Renders as a `<nav>` with `aria-label="breadcrumb"` for accessibility.
  */
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
 /** The ordered list container for breadcrumb items, handling wrapping and spacing. */
 function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A single step in the breadcrumb trail, wrapping a link or the current page label. */
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
+	return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
 }
 
 /** A navigable link within a breadcrumb item. Use `asChild` to render a router Link component instead of an anchor. */
 function BreadcrumbLink({
-  /** Merges props onto the child element instead of rendering an anchor tag. */
-  asChild,
-  className,
-  ...props
+	/** Merges props onto the child element instead of rendering an anchor tag. */
+	asChild,
+	className,
+	...props
 }: React.ComponentProps<'a'> & {
-  asChild?: boolean;
+	asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : 'a';
+	const Comp = asChild ? Slot.Root : 'a';
 
-  return (
-    <Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} />
-  );
+	return (
+		<Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} />
+	);
 }
 
 /** The current page label in the breadcrumb trail, marked with `aria-current="page"` and rendered as non-interactive text. */
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn('text-foreground font-normal', className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			tabIndex={0}
+			aria-disabled="true"
+			aria-current="page"
+			className={cn('text-foreground font-normal', className)}
+			{...props}
+		/>
+	);
 }
 
 /** A visual divider between breadcrumb items, defaulting to a chevron-right icon. Pass children to customize the separator. */
 function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn('[&>svg]:size-3.5', className)}
-      {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
-  );
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('[&>svg]:size-3.5', className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	);
 }
 
 /** A "..." indicator used to collapse intermediate breadcrumb levels when the trail is too long. */
 function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  );
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('flex size-9 items-center justify-center', className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
 }
 
 export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
 };

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

@@ -2,101 +2,101 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '@/components/ui/Button';
 
 const meta: Meta<typeof Button> = {
-  title: 'UI Components/Button',
-  component: Button,
+	title: 'UI Components/Button',
+	component: Button,
 };
 export default meta;
 type Story = StoryObj<typeof Button>;
 
 /** Shows the primary filled button variant. */
 export const Default: Story = {
-  args: {
-    children: 'Button',
-  },
+	args: {
+		children: 'Button',
+	},
 };
 
 /** Shows the secondary button variant with muted styling. */
 export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'Secondary',
-  },
+	args: {
+		variant: 'secondary',
+		children: 'Secondary',
+	},
 };
 
 /** Shows the destructive button variant for dangerous actions like delete. */
 export const Destructive: Story = {
-  args: {
-    variant: 'destructive',
-    children: 'Destructive',
-  },
+	args: {
+		variant: 'destructive',
+		children: 'Destructive',
+	},
 };
 
 /** Shows the outline button variant with a border and transparent background. */
 export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    children: 'Outline',
-  },
+	args: {
+		variant: 'outline',
+		children: 'Outline',
+	},
 };
 
 /** Shows the ghost button variant with no background until hovered. */
 export const Ghost: Story = {
-  args: {
-    variant: 'ghost',
-    children: 'Ghost',
-  },
+	args: {
+		variant: 'ghost',
+		children: 'Ghost',
+	},
 };
 
 /** Shows the link button variant styled as an inline text link with underline on hover. */
 export const Link: Story = {
-  args: {
-    variant: 'link',
-    children: 'Link',
-  },
+	args: {
+		variant: 'link',
+		children: 'Link',
+	},
 };
 
 /** Shows a compact small-sized button. */
 export const Small: Story = {
-  args: {
-    size: 'sm',
-    children: 'Small',
-  },
+	args: {
+		size: 'sm',
+		children: 'Small',
+	},
 };
 
 /** Shows a larger button with more padding. */
 export const Large: Story = {
-  args: {
-    size: 'lg',
-    children: 'Large',
-  },
+	args: {
+		size: 'lg',
+		children: 'Large',
+	},
 };
 
 /** Shows an icon-only square button. */
 export const Icon: Story = {
-  args: {
-    size: 'icon',
-    children: 'X',
-  },
+	args: {
+		size: 'icon',
+		children: 'X',
+	},
 };
 
 /** Displays all button variants and sizes side by side for visual comparison. */
 export const AllVariants: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-wrap items-center gap-2">
-        <Button variant="default">Default</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="destructive">Destructive</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button variant="link">Link</Button>
-      </div>
-      <div className="flex flex-wrap items-center gap-2">
-        <Button size="sm">Small</Button>
-        <Button size="default">Default</Button>
-        <Button size="lg">Large</Button>
-        <Button size="icon">X</Button>
-      </div>
-    </div>
-  ),
+	render: () => (
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-wrap items-center gap-2">
+				<Button variant="default">Default</Button>
+				<Button variant="secondary">Secondary</Button>
+				<Button variant="destructive">Destructive</Button>
+				<Button variant="outline">Outline</Button>
+				<Button variant="ghost">Ghost</Button>
+				<Button variant="link">Link</Button>
+			</div>
+			<div className="flex flex-wrap items-center gap-2">
+				<Button size="sm">Small</Button>
+				<Button size="default">Default</Button>
+				<Button size="lg">Large</Button>
+				<Button size="icon">X</Button>
+			</div>
+		</div>
+	),
 };

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

@@ -1,39 +1,39 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9',
+				'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm': 'size-8',
+				'icon-lg': 'size-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
 );
 
 /**
@@ -41,27 +41,27 @@ const buttonVariants = cva(
  * Supports six visual variants (default, secondary, destructive, outline, ghost, link) and multiple sizes including icon-only modes.
  */
 function Button({
-  className,
-  variant = 'default',
-  size = 'default',
-  /** Merges props onto the child element instead of rendering a button. Use with Link or anchor components for navigation. */
-  asChild = false,
-  ...props
+	className,
+	variant = 'default',
+	size = 'default',
+	/** Merges props onto the child element instead of rendering a button. Use with Link or anchor components for navigation. */
+	asChild = false,
+	...props
 }: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot.Root : 'button';
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot.Root : 'button';
 
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
 export { Button, buttonVariants };

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

@@ -1,32 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ButtonGroup } from '@/components/ui/ButtonGroup';
 import { Button } from '@/components/ui/Button';
+import { ButtonGroup } from '@/components/ui/ButtonGroup';
 
 const meta: Meta<typeof ButtonGroup> = {
-  title: 'UI Components/ButtonGroup',
-  component: ButtonGroup,
+	title: 'UI Components/ButtonGroup',
+	component: ButtonGroup,
 };
 export default meta;
 type Story = StoryObj<typeof ButtonGroup>;
 
 /** Shows a horizontal group of three outline buttons with connected borders. */
 export const Default: Story = {
-  render: () => (
-    <ButtonGroup>
-      <Button variant="outline">Left</Button>
-      <Button variant="outline">Center</Button>
-      <Button variant="outline">Right</Button>
-    </ButtonGroup>
-  ),
+	render: () => (
+		<ButtonGroup>
+			<Button variant="outline">Left</Button>
+			<Button variant="outline">Center</Button>
+			<Button variant="outline">Right</Button>
+		</ButtonGroup>
+	),
 };
 
 /** Shows a vertically stacked button group. */
 export const Vertical: Story = {
-  render: () => (
-    <ButtonGroup orientation="vertical">
-      <Button variant="outline">Top</Button>
-      <Button variant="outline">Middle</Button>
-      <Button variant="outline">Bottom</Button>
-    </ButtonGroup>
-  ),
+	render: () => (
+		<ButtonGroup orientation="vertical">
+			<Button variant="outline">Top</Button>
+			<Button variant="outline">Middle</Button>
+			<Button variant="outline">Bottom</Button>
+		</ButtonGroup>
+	),
 };