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

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

@@ -1,108 +1,106 @@
-import * as React from 'react';
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
-
+import type * as React from 'react';
+import { type Button, buttonVariants } from '@/components/ui/Button';
 import { cn } from '@/lib/utils';
-import { buttonVariants, type Button } from '@/components/ui/Button';
 
 /**
  * A navigation component for paginated content, rendered as a semantic nav element.
  * Compose with PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.
  */
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
-      {...props}
-    />
-  );
+	return (
+		<nav
+			aria-label="pagination"
+			data-slot="pagination"
+			className={cn('mx-auto flex w-full justify-center', className)}
+			{...props}
+		/>
+	);
 }
 
 function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
-  return <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...props} />;
+	return <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...props} />;
 }
 
 function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props} />;
+	return <li data-slot="pagination-item" {...props} />;
 }
 
 type PaginationLinkProps = {
-  isActive?: boolean;
+	isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>;
+	React.ComponentProps<'a'>;
 
 /** A page number link that renders as outlined when active and ghost when inactive. */
 function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? 'page' : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
-          size,
-        }),
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<a
+			aria-current={isActive ? 'page' : undefined}
+			data-slot="pagination-link"
+			data-active={isActive}
+			className={cn(
+				buttonVariants({
+					variant: isActive ? 'outline' : 'ghost',
+					size,
+				}),
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A "Previous" link with a left chevron icon for navigating to the prior page. */
 function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
-      {...props}
-    >
-      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  );
+	return (
+		<PaginationLink
+			aria-label="Go to previous page"
+			size="default"
+			className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+			{...props}
+		>
+			<ChevronLeftIcon />
+			<span className="hidden sm:block">Previous</span>
+		</PaginationLink>
+	);
 }
 
 /** A "Next" link with a right chevron icon for navigating to the following page. */
 function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
-      {...props}
-    >
-      <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </PaginationLink>
-  );
+	return (
+		<PaginationLink
+			aria-label="Go to next page"
+			size="default"
+			className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+			{...props}
+		>
+			<span className="hidden sm:block">Next</span>
+			<ChevronRightIcon />
+		</PaginationLink>
+	);
 }
 
 /** A visual ellipsis indicator representing skipped page numbers. */
 function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
+	return (
+		<span
+			aria-hidden
+			data-slot="pagination-ellipsis"
+			className={cn('flex size-9 items-center justify-center', className)}
+			{...props}
+		>
+			<MoreHorizontalIcon className="size-4" />
+			<span className="sr-only">More pages</span>
+		</span>
+	);
 }
 
 export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
 };

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

@@ -1,53 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/Popover';
 import { Button } from '@/components/ui/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover';
 
 const meta: Meta<typeof Popover> = {
-  title: 'UI Components/Popover',
-  component: Popover,
+	title: 'UI Components/Popover',
+	component: Popover,
 };
 export default meta;
 type Story = StoryObj<typeof Popover>;
 
 /** Shows a popover with form inputs for setting dimensions. */
 export const Default: Story = {
-  render: () => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <h4 className="font-medium leading-none">Dimensions</h4>
-            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
-          </div>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-3 items-center gap-4">
-              <span className="text-sm">Width</span>
-              <input className="border-input col-span-2 h-8 rounded-md border px-3 text-sm" defaultValue="100%" />
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <span className="text-sm">Height</span>
-              <input className="border-input col-span-2 h-8 rounded-md border px-3 text-sm" defaultValue="25px" />
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  ),
+	render: () => (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button variant="outline">Open Popover</Button>
+			</PopoverTrigger>
+			<PopoverContent>
+				<div className="grid gap-4">
+					<div className="space-y-2">
+						<h4 className="font-medium leading-none">Dimensions</h4>
+						<p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
+					</div>
+					<div className="grid gap-2">
+						<div className="grid grid-cols-3 items-center gap-4">
+							<span className="text-sm">Width</span>
+							<input className="border-input col-span-2 h-8 rounded-md border px-3 text-sm" defaultValue="100%" />
+						</div>
+						<div className="grid grid-cols-3 items-center gap-4">
+							<span className="text-sm">Height</span>
+							<input className="border-input col-span-2 h-8 rounded-md border px-3 text-sm" defaultValue="25px" />
+						</div>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	),
 };
 
 /** Shows a popover with simple informational text content. */
 export const SimpleText: Story = {
-  render: () => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Info</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-60">
-        <p className="text-sm">This is a simple popover with some informational text content.</p>
-      </PopoverContent>
-    </Popover>
-  ),
+	render: () => (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button variant="outline">Info</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-60">
+				<p className="text-sm">This is a simple popover with some informational text content.</p>
+			</PopoverContent>
+		</Popover>
+	),
 };

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

@@ -1,57 +1,57 @@
-import * as React from 'react';
 import { Popover as PopoverPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** A floating panel anchored to a trigger for rich content on click. */
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 /** The element that toggles the popover open and closed when clicked. */
 function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 /** The floating content panel rendered via a portal with animated enter/exit transitions. */
 function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-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-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-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-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
 }
 
 /** An optional custom anchor element to position the popover relative to instead of the trigger. */
 function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
 /** A layout wrapper for the popover's title and description. */
 function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="popover-header" className={cn('flex flex-col gap-1 text-sm', className)} {...props} />;
+	return <div data-slot="popover-header" className={cn('flex flex-col gap-1 text-sm', className)} {...props} />;
 }
 
 function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
-  return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
+	return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
 }
 
 function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  return <p data-slot="popover-description" className={cn('text-muted-foreground', className)} {...props} />;
+	return <p data-slot="popover-description" className={cn('text-muted-foreground', className)} {...props} />;
 }
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription };

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

@@ -2,31 +2,31 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Progress } from '@/components/ui/Progress';
 
 const meta: Meta<typeof Progress> = {
-  title: 'UI Components/Progress',
-  component: Progress,
+	title: 'UI Components/Progress',
+	component: Progress,
 };
 export default meta;
 type Story = StoryObj<typeof Progress>;
 
 /** Shows the progress bar at 50% with an adjustable value control. */
 export const Default: Story = {
-  args: {
-    value: 50,
-  },
-  render: (args) => <Progress {...args} className="w-[60%]" />,
+	args: {
+		value: 50,
+	},
+	render: (args) => <Progress {...args} className="w-[60%]" />,
 };
 
 /** Shows the progress bar at 0% (empty state). */
 export const Empty: Story = {
-  render: () => <Progress value={0} className="w-[60%]" />,
+	render: () => <Progress value={0} className="w-[60%]" />,
 };
 
 /** Shows the progress bar at 50%. */
 export const Half: Story = {
-  render: () => <Progress value={50} className="w-[60%]" />,
+	render: () => <Progress value={50} className="w-[60%]" />,
 };
 
 /** Shows the progress bar at 100% (complete state). */
 export const Full: Story = {
-  render: () => <Progress value={100} className="w-[60%]" />,
+	render: () => <Progress value={100} className="w-[60%]" />,
 };

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

@@ -1,25 +1,25 @@
 'use client';
 
-import * as React from 'react';
 import { Progress as ProgressPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** A horizontal progress bar. Set `value` (0-100) to control fill level. */
 function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
+	return (
+		<ProgressPrimitive.Root
+			data-slot="progress"
+			className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
+			{...props}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="bg-primary h-full w-full flex-1 transition-all"
+				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			/>
+		</ProgressPrimitive.Root>
+	);
 }
 
 export { Progress };

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

@@ -1,50 +1,50 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
 import { Label } from '@/components/ui/Label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
 
 const meta: Meta<typeof RadioGroup> = {
-  title: 'UI Components/RadioGroup',
-  component: RadioGroup,
+	title: 'UI Components/RadioGroup',
+	component: RadioGroup,
 };
 export default meta;
 type Story = StoryObj<typeof RadioGroup>;
 
 /** Shows a vertical radio group with three options and a pre-selected value. */
 export const Default: Story = {
-  render: () => (
-    <RadioGroup defaultValue="comfortable">
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="default" id="r1" />
-        <Label htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="comfortable" id="r2" />
-        <Label htmlFor="r2">Comfortable</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="compact" id="r3" />
-        <Label htmlFor="r3">Compact</Label>
-      </div>
-    </RadioGroup>
-  ),
+	render: () => (
+		<RadioGroup defaultValue="comfortable">
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="default" id="r1" />
+				<Label htmlFor="r1">Default</Label>
+			</div>
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="comfortable" id="r2" />
+				<Label htmlFor="r2">Comfortable</Label>
+			</div>
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="compact" id="r3" />
+				<Label htmlFor="r3">Compact</Label>
+			</div>
+		</RadioGroup>
+	),
 };
 
 /** Shows a horizontally laid out radio group. */
 export const Horizontal: Story = {
-  render: () => (
-    <RadioGroup defaultValue="medium" className="flex flex-row gap-4">
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="small" id="h1" />
-        <Label htmlFor="h1">Small</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="medium" id="h2" />
-        <Label htmlFor="h2">Medium</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="large" id="h3" />
-        <Label htmlFor="h3">Large</Label>
-      </div>
-    </RadioGroup>
-  ),
+	render: () => (
+		<RadioGroup defaultValue="medium" className="flex flex-row gap-4">
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="small" id="h1" />
+				<Label htmlFor="h1">Small</Label>
+			</div>
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="medium" id="h2" />
+				<Label htmlFor="h2">Medium</Label>
+			</div>
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="large" id="h3" />
+				<Label htmlFor="h3">Large</Label>
+			</div>
+		</RadioGroup>
+	),
 };

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { CircleIcon } from 'lucide-react';
 import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -9,28 +9,28 @@ import { cn } from '@/lib/utils';
  * Compose with RadioGroupItem and Label to create accessible radio button groups.
  */
 function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn('grid gap-3', className)} {...props} />;
+	return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn('grid gap-3', className)} {...props} />;
 }
 
 /** An individual radio button that displays a filled dot when selected. */
 function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        'border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
+	return (
+		<RadioGroupPrimitive.Item
+			data-slot="radio-group-item"
+			className={cn(
+				'border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator
+				data-slot="radio-group-indicator"
+				className="relative flex items-center justify-center"
+			>
+				<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
 }
 
 export { RadioGroup, RadioGroupItem };