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

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

@@ -1,148 +1,145 @@
-import * as React from 'react';
 import type { Label as LabelPrimitive } from 'radix-ui';
 import { Slot } from 'radix-ui';
+import * as React from 'react';
 import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
+	useFormState,
 } from 'react-hook-form';
-
-import { cn } from '@/lib/utils';
 import { Label } from '@/components/ui/Label';
+import { cn } from '@/lib/utils';
 
 /**
  * Form context provider that wraps react-hook-form's FormProvider.
  * Use with FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage for accessible form layouts with validation.
  */
 function Form({ ...props }: React.ComponentProps<typeof FormProvider>) {
-  return <FormProvider {...props} />;
+	return <FormProvider {...props} />;
 }
 
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName;
+	name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 /** Connects a form input to react-hook-form via Controller, providing field context to child components. */
 function FormField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ ...props }: ControllerProps<TFieldValues, TName>) {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+}
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error('useFormField should be used within <FormField>');
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
 };
 
 type FormItemContextValue = {
-  id: string;
+	id: string;
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
 /** Container for a single form field that provides ID context for accessibility linking between label, input, description, and error message. */
 function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const id = React.useId();
+	const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
-    </FormItemContext.Provider>
-  );
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+		</FormItemContext.Provider>
+	);
 }
 
 /** Label for a form field that automatically links to its input and displays error styling when validation fails. */
 function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn('data-[error=true]:text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn('data-[error=true]:text-destructive', className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
 }
 
 /** Wrapper that merges accessibility attributes (id, aria-describedby, aria-invalid) onto the form input element. */
 function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot.Root
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+	return (
+		<Slot.Root
+			data-slot="form-control"
+			id={formItemId}
+			aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
 }
 
 /** Helper text displayed below a form input, linked via aria-describedby for screen readers. */
 function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			data-slot="form-description"
+			id={formDescriptionId}
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Displays validation error messages for a form field. Automatically shows the field's error message or custom children. */
 function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? '') : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
-      {body}
-    </p>
-  );
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? '') : props.children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
+			{body}
+		</p>
+	);
 }
 
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

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

@@ -1,49 +1,49 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/HoverCard';
 import { CalendarDaysIcon } from 'lucide-react';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/HoverCard';
 
 const meta: Meta<typeof HoverCard> = {
-  title: 'UI Components/HoverCard',
-  component: HoverCard,
+	title: 'UI Components/HoverCard',
+	component: HoverCard,
 };
 export default meta;
 type Story = StoryObj<typeof HoverCard>;
 
 /** Shows a user profile preview card triggered by hovering over a username link. */
 export const Default: Story = {
-  render: () => (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <a href="#" className="text-sm font-medium underline underline-offset-4">
-          @nextjs
-        </a>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex justify-between space-x-4">
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">The React Framework for the Web. Created and maintained by @vercel.</p>
-            <div className="flex items-center pt-2">
-              <CalendarDaysIcon className="text-muted-foreground mr-2 h-4 w-4" />
-              <span className="text-muted-foreground text-xs">Joined December 2021</span>
-            </div>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  ),
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger asChild>
+				<a href="#" className="text-sm font-medium underline underline-offset-4">
+					@nextjs
+				</a>
+			</HoverCardTrigger>
+			<HoverCardContent className="w-80">
+				<div className="flex justify-between space-x-4">
+					<div className="space-y-1">
+						<h4 className="text-sm font-semibold">@nextjs</h4>
+						<p className="text-sm">The React Framework for the Web. Created and maintained by @vercel.</p>
+						<div className="flex items-center pt-2">
+							<CalendarDaysIcon className="text-muted-foreground mr-2 h-4 w-4" />
+							<span className="text-muted-foreground text-xs">Joined December 2021</span>
+						</div>
+					</div>
+				</div>
+			</HoverCardContent>
+		</HoverCard>
+	),
 };
 
 /** Minimal hover card with just text content. */
 export const Simple: Story = {
-  render: () => (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <span className="cursor-pointer text-sm font-medium underline underline-offset-4">Hover me</span>
-      </HoverCardTrigger>
-      <HoverCardContent>
-        <p className="text-sm">This is a simple hover card with some text content.</p>
-      </HoverCardContent>
-    </HoverCard>
-  ),
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger asChild>
+				<span className="cursor-pointer text-sm font-medium underline underline-offset-4">Hover me</span>
+			</HoverCardTrigger>
+			<HoverCardContent>
+				<p className="text-sm">This is a simple hover card with some text content.</p>
+			</HoverCardContent>
+		</HoverCard>
+	),
 };

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

@@ -1,39 +1,39 @@
-import * as React from 'react';
 import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** A popup card that appears when hovering over a trigger element. Ideal for previewing content like user profiles or link destinations. */
 function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
 /** Element that activates the hover card on mouse enter. */
 function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+	return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
 }
 
 /** The popup content that appears when hovering. Portals to body and animates in/out. */
 function HoverCardContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
+	return (
+		<HoverCardPrimitive.Portal data-slot="hover-card-portal">
+			<HoverCardPrimitive.Content
+				data-slot="hover-card-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+					className,
+				)}
+				{...props}
+			/>
+		</HoverCardPrimitive.Portal>
+	);
 }
 
 export { HoverCard, HoverCardTrigger, HoverCardContent };

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

@@ -3,40 +3,40 @@ import { Input } from '@/components/ui/Input';
 import { Label } from '@/components/ui/Label';
 
 const meta: Meta<typeof Input> = {
-  title: 'UI Components/Input',
-  component: Input,
+	title: 'UI Components/Input',
+	component: Input,
 };
 export default meta;
 type Story = StoryObj<typeof Input>;
 
 /** Basic empty input field. */
 export const Default: Story = {
-  args: {},
+	args: {},
 };
 
 /** Email input with placeholder text. */
 export const WithPlaceholder: Story = {
-  args: {
-    placeholder: 'Enter your email...',
-    type: 'email',
-  },
+	args: {
+		placeholder: 'Enter your email...',
+		type: 'email',
+	},
 };
 
 /** Disabled input that cannot be edited. */
 export const Disabled: Story = {
-  args: {
-    placeholder: 'Disabled input',
-    disabled: true,
-    defaultValue: 'Cannot edit this',
-  },
+	args: {
+		placeholder: 'Disabled input',
+		disabled: true,
+		defaultValue: 'Cannot edit this',
+	},
 };
 
 /** Input paired with a label for accessibility. */
 export const WithLabel: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email-input">Email</Label>
-      <Input type="email" id="email-input" placeholder="Email" />
-    </div>
-  ),
+	render: () => (
+		<div className="grid w-full max-w-sm items-center gap-1.5">
+			<Label htmlFor="email-input">Email</Label>
+			<Input type="email" id="email-input" placeholder="Email" />
+		</div>
+	),
 };

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

@@ -1,22 +1,22 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** A styled text input field. Supports all native input types including file uploads. Shows validation error styling via aria-invalid. */
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        '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',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'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',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export { Input };

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

@@ -1,53 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { InputGroup, InputGroupAddon, InputGroupText, InputGroupInput } from '@/components/ui/InputGroup';
 import { MailIcon, SearchIcon } from 'lucide-react';
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '@/components/ui/InputGroup';
 
 const meta: Meta<typeof InputGroup> = {
-  title: 'UI Components/InputGroup',
-  component: InputGroup,
+	title: 'UI Components/InputGroup',
+	component: InputGroup,
 };
 export default meta;
 type Story = StoryObj<typeof InputGroup>;
 
 /** Input with a leading email icon addon. */
 export const Default: Story = {
-  render: () => (
-    <InputGroup className="max-w-sm">
-      <InputGroupAddon align="inline-start">
-        <InputGroupText>
-          <MailIcon />
-        </InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="you@example.com" />
-    </InputGroup>
-  ),
+	render: () => (
+		<InputGroup className="max-w-sm">
+			<InputGroupAddon align="inline-start">
+				<InputGroupText>
+					<MailIcon />
+				</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="you@example.com" />
+		</InputGroup>
+	),
 };
 
 /** URL input with text addons on both sides. */
 export const WithPrefixAndSuffix: Story = {
-  render: () => (
-    <InputGroup className="max-w-sm">
-      <InputGroupAddon align="inline-start">
-        <InputGroupText>https://</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="example.com" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupText>.com</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-  ),
+	render: () => (
+		<InputGroup className="max-w-sm">
+			<InputGroupAddon align="inline-start">
+				<InputGroupText>https://</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="example.com" />
+			<InputGroupAddon align="inline-end">
+				<InputGroupText>.com</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+	),
 };
 
 /** Search input with a magnifying glass icon. */
 export const SearchInput: Story = {
-  render: () => (
-    <InputGroup className="max-w-sm">
-      <InputGroupAddon align="inline-start">
-        <InputGroupText>
-          <SearchIcon />
-        </InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Search..." />
-    </InputGroup>
-  ),
+	render: () => (
+		<InputGroup className="max-w-sm">
+			<InputGroupAddon align="inline-start">
+				<InputGroupText>
+					<SearchIcon />
+				</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="Search..." />
+		</InputGroup>
+	),
 };