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

package/dist/starter/src/components/ui/DesignSystem-Typography.stories.tsx

@@ -1,80 +1,80 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 interface TypographyRowProps {
-  label: string;
-  className: string;
-  sample?: string;
+	label: string;
+	className: string;
+	sample?: string;
 }
 
 function TypographyRow({ label, className, sample }: TypographyRowProps) {
-  return (
-    <div className="flex flex-col gap-1 border-b border-border pb-4">
-      <div className="flex items-baseline gap-3">
-        <span className="text-xs font-mono text-muted-foreground min-w-[120px] shrink-0">{label}</span>
-        <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">{className}</code>
-      </div>
-      <div className={className}>{sample ?? 'The quick brown fox jumps over the lazy dog'}</div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-1 border-b border-border pb-4">
+			<div className="flex items-baseline gap-3">
+				<span className="text-xs font-mono text-muted-foreground min-w-[120px] shrink-0">{label}</span>
+				<code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">{className}</code>
+			</div>
+			<div className={className}>{sample ?? 'The quick brown fox jumps over the lazy dog'}</div>
+		</div>
+	);
 }
 
 function TypographyScale() {
-  return (
-    <div className="flex flex-col gap-6 max-w-3xl">
-      <div className="flex flex-col gap-1 pb-4">
-        <h2 className="text-2xl font-semibold">Typography Scale</h2>
-        <p className="text-sm text-muted-foreground">
-          Visual reference for typography classes used throughout the design system.
-        </p>
-      </div>
+	return (
+		<div className="flex flex-col gap-6 max-w-3xl">
+			<div className="flex flex-col gap-1 pb-4">
+				<h2 className="text-2xl font-semibold">Typography Scale</h2>
+				<p className="text-sm text-muted-foreground">
+					Visual reference for typography classes used throughout the design system.
+				</p>
+			</div>
 
-      <div className="flex flex-col gap-6">
-        <h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Headings</h3>
-        <TypographyRow label="H1" className="text-5xl font-extrabold tracking-tight" sample="Display Heading" />
-        <TypographyRow label="H2" className="text-4xl font-bold tracking-tight" sample="Page Heading" />
-        <TypographyRow label="H3" className="text-3xl font-bold" sample="Section Heading" />
-        <TypographyRow label="H4" className="text-2xl font-semibold" sample="Subsection Heading" />
-        <TypographyRow label="H5" className="text-xl font-semibold" sample="Card Heading" />
-      </div>
+			<div className="flex flex-col gap-6">
+				<h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Headings</h3>
+				<TypographyRow label="H1" className="text-5xl font-extrabold tracking-tight" sample="Display Heading" />
+				<TypographyRow label="H2" className="text-4xl font-bold tracking-tight" sample="Page Heading" />
+				<TypographyRow label="H3" className="text-3xl font-bold" sample="Section Heading" />
+				<TypographyRow label="H4" className="text-2xl font-semibold" sample="Subsection Heading" />
+				<TypographyRow label="H5" className="text-xl font-semibold" sample="Card Heading" />
+			</div>
 
-      <div className="flex flex-col gap-6 mt-4">
-        <h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Body</h3>
-        <TypographyRow
-          label="Body (lead)"
-          className="text-base leading-relaxed"
-          sample="Body text with relaxed leading for longer paragraphs. This style improves readability for multi-line content blocks."
-        />
-        <TypographyRow
-          label="Body"
-          className="text-base"
-          sample="Default body text used for general content and UI labels."
-        />
-      </div>
+			<div className="flex flex-col gap-6 mt-4">
+				<h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Body</h3>
+				<TypographyRow
+					label="Body (lead)"
+					className="text-base leading-relaxed"
+					sample="Body text with relaxed leading for longer paragraphs. This style improves readability for multi-line content blocks."
+				/>
+				<TypographyRow
+					label="Body"
+					className="text-base"
+					sample="Default body text used for general content and UI labels."
+				/>
+			</div>
 
-      <div className="flex flex-col gap-6 mt-4">
-        <h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Muted &amp; Small</h3>
-        <TypographyRow
-          label="Muted"
-          className="text-sm text-muted-foreground"
-          sample="Secondary text for descriptions, help text, and supplementary information."
-        />
-        <TypographyRow
-          label="Small / Caption"
-          className="text-xs text-muted-foreground"
-          sample="Captions, timestamps, and fine-print details."
-        />
-      </div>
-    </div>
-  );
+			<div className="flex flex-col gap-6 mt-4">
+				<h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Muted &amp; Small</h3>
+				<TypographyRow
+					label="Muted"
+					className="text-sm text-muted-foreground"
+					sample="Secondary text for descriptions, help text, and supplementary information."
+				/>
+				<TypographyRow
+					label="Small / Caption"
+					className="text-xs text-muted-foreground"
+					sample="Captions, timestamps, and fine-print details."
+				/>
+			</div>
+		</div>
+	);
 }
 
 const meta: Meta = {
-  title: 'Design System/Typography',
-  tags: ['!autodocs', '!manifest'],
+	title: 'Design System/Typography',
+	tags: ['!autodocs', '!manifest'],
 };
 export default meta;
 type Story = StoryObj;
 
 export const TypeScale: Story = {
-  render: () => <TypographyScale />,
+	render: () => <TypographyScale />,
 };

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

@@ -1,74 +1,74 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@/components/ui/Button';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from '@/components/ui/Dialog';
-import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Label } from '@/components/ui/Label';
 
 const meta: Meta<typeof Dialog> = {
-  title: 'UI Components/Dialog',
-  component: Dialog,
+	title: 'UI Components/Dialog',
+	component: Dialog,
 };
 export default meta;
 type Story = StoryObj<typeof Dialog>;
 
 /** Shows a dialog with a form for editing profile information. */
 export const Default: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>Make changes to your profile here. Click save when you are done.</DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
-              Name
-            </Label>
-            <Input id="name" defaultValue="John Doe" className="col-span-3" />
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
-              Username
-            </Label>
-            <Input id="username" defaultValue="@johndoe" className="col-span-3" />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
+	render: () => (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="outline">Edit Profile</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>Edit profile</DialogTitle>
+					<DialogDescription>Make changes to your profile here. Click save when you are done.</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 py-4">
+					<div className="grid grid-cols-4 items-center gap-4">
+						<Label htmlFor="name" className="text-right">
+							Name
+						</Label>
+						<Input id="name" defaultValue="John Doe" className="col-span-3" />
+					</div>
+					<div className="grid grid-cols-4 items-center gap-4">
+						<Label htmlFor="username" className="text-right">
+							Username
+						</Label>
+						<Input id="username" defaultValue="@johndoe" className="col-span-3" />
+					</div>
+				</div>
+				<DialogFooter>
+					<Button type="submit">Save changes</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	),
 };
 
 /** Shows a confirmation dialog with a footer close button and a destructive action. */
 export const WithCloseButton: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Confirm Action</DialogTitle>
-          <DialogDescription>Are you sure you want to proceed? This action cannot be undone.</DialogDescription>
-        </DialogHeader>
-        <DialogFooter showCloseButton>
-          <Button variant="destructive">Confirm</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
+	render: () => (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="outline">Open Dialog</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Confirm Action</DialogTitle>
+					<DialogDescription>Are you sure you want to proceed? This action cannot be undone.</DialogDescription>
+				</DialogHeader>
+				<DialogFooter showCloseButton>
+					<Button variant="destructive">Confirm</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	),
 };

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

@@ -1,42 +1,41 @@
-import * as React from 'react';
 import { XIcon } from 'lucide-react';
 import { Dialog as DialogPrimitive } 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 modal overlay with focus trapping and scroll locking. Click outside or press Escape to close. */
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 /** Button or element that opens the dialog when clicked. */
 function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 /** Renders dialog content into a React portal. */
 function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 /** Programmatic close trigger for the dialog. */
 function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 /** Semi-transparent backdrop behind the dialog that dims the page content. */
 function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="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 (
+		<DialogPrimitive.Overlay
+			data-slot="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}
+		/>
+	);
 }
 
 /**
@@ -44,49 +43,49 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
  * Set showCloseButton={false} to hide the top-right X button.
  */
 function DialogContent({
-  className,
-  children,
-  /** Whether to render the close (X) button in the top-right corner. */
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	/** Whether to render the close (X) button in the top-right corner. */
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        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 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 outline-none sm:max-w-lg',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				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 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 outline-none sm:max-w-lg',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
 /** Container for DialogTitle and DialogDescription at the top of the dialog. */
 function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+			{...props}
+		/>
+	);
 }
 
 /**
@@ -94,61 +93,61 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  * Set showCloseButton to add an automatic "Close" button.
  */
 function DialogFooter({
-  className,
-  /** Whether to append a "Close" button that dismisses the dialog. */
-  showCloseButton = false,
-  children,
-  ...props
+	className,
+	/** Whether to append a "Close" button that dismisses the dialog. */
+	showCloseButton = false,
+	children,
+	...props
 }: React.ComponentProps<'div'> & {
-  showCloseButton?: boolean;
+	showCloseButton?: boolean;
 }) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  );
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
 }
 
 /** Accessible title for the dialog. Required for screen reader support. */
 function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
-      {...props}
-    />
-  );
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn('text-lg leading-none font-semibold', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Accessible description text for the dialog, displayed below the title. */
 function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
 };

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

@@ -2,37 +2,37 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { DirectionProvider, useDirection } from '@/components/ui/Direction';
 
 const meta: Meta<typeof DirectionProvider> = {
-  title: 'UI Components/Direction',
-  component: DirectionProvider,
+	title: 'UI Components/Direction',
+	component: DirectionProvider,
 };
 export default meta;
 type Story = StoryObj<typeof DirectionProvider>;
 
 function DirectionDisplay() {
-  const direction = useDirection();
-  return <p className="text-sm text-muted-foreground">Current direction: {direction ?? 'not set'}</p>;
+	const direction = useDirection();
+	return <p className="text-sm text-muted-foreground">Current direction: {direction ?? 'not set'}</p>;
 }
 
 /** Shows the DirectionProvider in left-to-right mode. */
 export const LTR: Story = {
-  render: () => (
-    <DirectionProvider dir="ltr">
-      <div className="space-y-2">
-        <DirectionDisplay />
-        <p>This content is rendered in a left-to-right context.</p>
-      </div>
-    </DirectionProvider>
-  ),
+	render: () => (
+		<DirectionProvider dir="ltr">
+			<div className="space-y-2">
+				<DirectionDisplay />
+				<p>This content is rendered in a left-to-right context.</p>
+			</div>
+		</DirectionProvider>
+	),
 };
 
 /** Shows the DirectionProvider in right-to-left mode for internationalization support. */
 export const RTL: Story = {
-  render: () => (
-    <DirectionProvider dir="rtl">
-      <div className="space-y-2" dir="rtl">
-        <DirectionDisplay />
-        <p>This content is rendered in a right-to-left context.</p>
-      </div>
-    </DirectionProvider>
-  ),
+	render: () => (
+		<DirectionProvider dir="rtl">
+			<div className="space-y-2" dir="rtl">
+				<DirectionDisplay />
+				<p>This content is rendered in a right-to-left context.</p>
+			</div>
+		</DirectionProvider>
+	),
 };

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

@@ -1,21 +1,21 @@
 'use client';
 
-import * as React from 'react';
 import { Direction } from 'radix-ui';
+import type * as React from 'react';
 
 /**
  * Provides text direction (LTR/RTL) context to all descendant Radix UI components.
  * Accepts either `dir` or `direction` prop for convenience.
  */
 function DirectionProvider({
-  dir,
-  /** Alias for `dir`. If both are provided, `direction` takes precedence. */
-  direction,
-  children,
+	dir,
+	/** Alias for `dir`. If both are provided, `direction` takes precedence. */
+	direction,
+	children,
 }: React.ComponentProps<typeof Direction.DirectionProvider> & {
-  direction?: React.ComponentProps<typeof Direction.DirectionProvider>['dir'];
+	direction?: React.ComponentProps<typeof Direction.DirectionProvider>['dir'];
 }) {
-  return <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>;
+	return <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>;
 }
 
 /** Hook to read the current text direction from the nearest DirectionProvider. */