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

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

@@ -1,24 +1,23 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/Separator';
+import { cn } from '@/lib/utils';
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
-        vertical:
-          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
-      },
-    },
-    defaultVariants: {
-      orientation: 'horizontal',
-    },
-  },
+	"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+	{
+		variants: {
+			orientation: {
+				horizontal:
+					'[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+				vertical:
+					'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+			},
+		},
+		defaultVariants: {
+			orientation: 'horizontal',
+		},
+	},
 );
 
 /**
@@ -26,56 +25,56 @@ const buttonGroupVariants = cva(
  * Supports horizontal (default) and vertical orientation.
  */
 function ButtonGroup({
-  className,
-  orientation,
-  ...props
+	className,
+	orientation,
+	...props
 }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			role="group"
+			data-slot="button-group"
+			data-orientation={orientation}
+			className={cn(buttonGroupVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
 }
 
 /** A non-interactive text label or addon segment within a ButtonGroup, styled to match adjacent buttons. */
 function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
+	className,
+	asChild = false,
+	...props
 }: React.ComponentProps<'div'> & {
-  asChild?: boolean;
+	asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : 'div';
+	const Comp = asChild ? Slot.Root : 'div';
 
-  return (
-    <Comp
-      className={cn(
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			className={cn(
+				"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A visual divider between buttons in a ButtonGroup, rendered as a Separator. */
 function ButtonGroupSeparator({
-  className,
-  orientation = 'vertical',
-  ...props
+	className,
+	orientation = 'vertical',
+	...props
 }: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', className)}
-      {...props}
-    />
-  );
+	return (
+		<Separator
+			data-slot="button-group-separator"
+			orientation={orientation}
+			className={cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', className)}
+			{...props}
+		/>
+	);
 }
 
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

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

@@ -1,40 +1,41 @@
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import type { DateRange } from 'react-day-picker';
 import { Calendar } from '@/components/ui/Calendar';
 
 const meta: Meta<typeof Calendar> = {
-  title: 'UI Components/Calendar',
-  component: Calendar,
+	title: 'UI Components/Calendar',
+	component: Calendar,
 };
 export default meta;
 type Story = StoryObj<typeof Calendar>;
 
 function CalendarDemo() {
-  const [date, setDate] = useState<Date | undefined>(new Date());
-  return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />;
+	const [date, setDate] = useState<Date | undefined>(new Date());
+	return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />;
 }
 
 /** Shows a single-date selection calendar with controlled state. */
 export const Default: Story = {
-  render: () => <CalendarDemo />,
+	render: () => <CalendarDemo />,
 };
 
 function CalendarRangeDemo() {
-  const [range, setRange] = useState<{ from: Date; to?: Date } | undefined>({
-    from: new Date(),
-  });
-  return (
-    <Calendar
-      mode="range"
-      selected={range}
-      onSelect={setRange as (value: unknown) => void}
-      numberOfMonths={2}
-      className="rounded-md border"
-    />
-  );
+	const [range, setRange] = useState<DateRange | undefined>({
+		from: new Date(),
+	});
+	return (
+		<Calendar
+			mode="range"
+			selected={range}
+			onSelect={setRange}
+			numberOfMonths={2}
+			className="rounded-md border"
+		/>
+	);
 }
 
 /** Demonstrates date range selection across two side-by-side months. */
 export const RangeSelection: Story = {
-  render: () => <CalendarRangeDemo />,
+	render: () => <CalendarRangeDemo />,
 };

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

@@ -1,165 +1,164 @@
-import * as React from 'react';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { DayPicker, getDefaultClassNames, type DayButton } from 'react-day-picker';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
+import { type DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 import { Button, buttonVariants } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
 
 /**
  * A date picker component built on react-day-picker supporting single date, multiple date, and date range selection.
  * Supports month/year dropdowns, outside days visibility, keyboard navigation, and multi-month layouts.
  */
 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = 'label',
-  /** The Button variant used for navigation arrows. Defaults to `"ghost"`. */
-  buttonVariant = 'ghost',
-  formatters,
-  components,
-  ...props
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = 'label',
+	/** The Button variant used for navigation arrows. Defaults to `"ghost"`. */
+	buttonVariant = 'ghost',
+	formatters,
+	components,
+	...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+	buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }) {
-  const defaultClassNames = getDefaultClassNames();
+	const defaultClassNames = getDefaultClassNames();
 
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn('w-fit', defaultClassNames.root),
-        months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-        nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_previous,
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_next,
-        ),
-        month_caption: cn(
-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
-          defaultClassNames.dropdowns,
-        ),
-        dropdown_root: cn(
-          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
-          defaultClassNames.dropdown_root,
-        ),
-        dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
-        caption_label: cn(
-          'select-none font-medium',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
-          defaultClassNames.caption_label,
-        ),
-        table: 'w-full border-collapse',
-        weekdays: cn('flex', defaultClassNames.weekdays),
-        weekday: cn(
-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
-          defaultClassNames.weekday,
-        ),
-        week: cn('flex w-full mt-2', defaultClassNames.week),
-        week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
-        week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
-        day: cn(
-          'relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
-          props.showWeekNumber
-            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
-            : '[&:first-child[data-selected=true]_button]:rounded-l-md',
-          defaultClassNames.day,
-        ),
-        range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-        today: cn(
-          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
-          defaultClassNames.today,
-        ),
-        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
-        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
-        hidden: cn('invisible', defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === 'left') {
-            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />;
-          }
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className,
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+				...formatters,
+			}}
+			classNames={{
+				root: cn('w-fit', defaultClassNames.root),
+				months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+				month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+				nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+					defaultClassNames.month_caption,
+				),
+				dropdowns: cn(
+					'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+					defaultClassNames.dropdowns,
+				),
+				dropdown_root: cn(
+					'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+					defaultClassNames.dropdown_root,
+				),
+				dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
+				caption_label: cn(
+					'select-none font-medium',
+					captionLayout === 'label'
+						? 'text-sm'
+						: 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+					defaultClassNames.caption_label,
+				),
+				table: 'w-full border-collapse',
+				weekdays: cn('flex', defaultClassNames.weekdays),
+				weekday: cn(
+					'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+					defaultClassNames.weekday,
+				),
+				week: cn('flex w-full mt-2', defaultClassNames.week),
+				week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+				week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
+				day: cn(
+					'relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+					props.showWeekNumber
+						? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
+						: '[&:first-child[data-selected=true]_button]:rounded-l-md',
+					defaultClassNames.day,
+				),
+				range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
+				range_middle: cn('rounded-none', defaultClassNames.range_middle),
+				range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+				today: cn(
+					'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+					defaultClassNames.today,
+				),
+				outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+				disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+				hidden: cn('invisible', defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === 'left') {
+						return <ChevronLeftIcon className={cn('size-4', className)} {...props} />;
+					}
 
-          if (orientation === 'right') {
-            return <ChevronRightIcon className={cn('size-4', className)} {...props} />;
-          }
+					if (orientation === 'right') {
+						return <ChevronRightIcon className={cn('size-4', className)} {...props} />;
+					}
 
-          return <ChevronDownIcon className={cn('size-4', className)} {...props} />;
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
-            </td>
-          );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  );
+					return <ChevronDownIcon className={cn('size-4', className)} {...props} />;
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+						</td>
+					);
+				},
+				...components,
+			}}
+			{...props}
+		/>
+	);
 }
 
 /** Internal button rendered for each day cell, handling selection states, range highlighting, and focus management. */
 function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
+	const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
 
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
-        defaultClassNames.day,
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export { Calendar, CalendarDayButton };

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

@@ -1,44 +1,44 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/Card';
 
 const meta: Meta<typeof Card> = {
-  title: 'UI Components/Card',
-  component: Card,
+	title: 'UI Components/Card',
+	component: Card,
 };
 export default meta;
 type Story = StoryObj<typeof Card>;
 
 /** Shows a full card with header, content, and footer containing action buttons. */
 export const Default: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card description goes here.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card content with some example text to demonstrate the layout.</p>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
-      </CardFooter>
-    </Card>
-  ),
+	render: () => (
+		<Card className="w-[350px]">
+			<CardHeader>
+				<CardTitle>Card Title</CardTitle>
+				<CardDescription>Card description goes here.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<p>Card content with some example text to demonstrate the layout.</p>
+			</CardContent>
+			<CardFooter className="flex justify-between">
+				<Button variant="outline">Cancel</Button>
+				<Button>Deploy</Button>
+			</CardFooter>
+		</Card>
+	),
 };
 
 /** Shows a minimal card with only a header and content, without a footer. */
 export const Simple: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground">Check your inbox for the latest updates.</p>
-      </CardContent>
-    </Card>
-  ),
+	render: () => (
+		<Card className="w-[350px]">
+			<CardHeader>
+				<CardTitle>Notifications</CardTitle>
+				<CardDescription>You have 3 unread messages.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<p className="text-sm text-muted-foreground">Check your inbox for the latest updates.</p>
+			</CardContent>
+		</Card>
+	),
 };