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

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

@@ -1,153 +1,152 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Textarea } from '@/components/ui/Textarea';
+import { cn } from '@/lib/utils';
 
 /** Container that combines an input with addons like icons, buttons, or text. Supports inline and block-positioned addons. */
 function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
-        'h-9 min-w-0 has-[>textarea]:h-auto',
+	return (
+		<div
+			data-slot="input-group"
+			role="group"
+			className={cn(
+				'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+				'h-9 min-w-0 has-[>textarea]:h-auto',
 
-        // Variants based on alignment.
-        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
-        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
-        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+				// Variants based on alignment.
+				'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+				'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+				'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+				'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
 
-        // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+				// Focus state.
+				'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
 
-        // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+				// Error state.
+				'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
 
-        className,
-      )}
-      {...props}
-    />
-  );
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
-        'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
-        'block-start':
-          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
-        'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
-      },
-    },
-    defaultVariants: {
-      align: 'inline-start',
-    },
-  },
+	"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+	{
+		variants: {
+			align: {
+				'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+				'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+				'block-start':
+					'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+				'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	},
 );
 
 /** Positioned container for icons, text, or buttons alongside the input. Use align prop to position at inline-start, inline-end, block-start, or block-end. */
 function InputGroupAddon({
-  className,
-  align = 'inline-start',
-  ...props
+	className,
+	align = 'inline-start',
+	...props
 }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest('button')) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector('input')?.focus();
-      }}
-      {...props}
-    />
-  );
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: Click handler delegates focus to the sibling input, not an interactive action
+		<div
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest('button')) {
+					return;
+				}
+				e.currentTarget.parentElement?.querySelector('input')?.focus();
+			}}
+			{...props}
+		/>
+	);
 }
 
 const inputGroupButtonVariants = cva('text-sm shadow-none flex gap-2 items-center', {
-  variants: {
-    size: {
-      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-      sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
-      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
-      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
-    },
-  },
-  defaultVariants: {
-    size: 'xs',
-  },
+	variants: {
+		size: {
+			xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+			sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
 });
 
 /** A compact button sized for use inside InputGroupAddon. */
 function InputGroupButton({
-  className,
-  type = 'button',
-  variant = 'ghost',
-  size = 'xs',
-  ...props
+	className,
+	type = 'button',
+	variant = 'ghost',
+	size = 'xs',
+	...props
 }: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  );
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	);
 }
 
 /** Static text or icon displayed in an InputGroupAddon. */
 function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn(
+				"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Input element styled to integrate seamlessly within an InputGroup. */
 function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Textarea element styled to integrate seamlessly within an InputGroup. */
 function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

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

@@ -1,42 +1,42 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/ui/InputOTP';
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/InputOTP';
 
 const meta: Meta<typeof InputOTP> = {
-  title: 'UI Components/InputOTP',
-  component: InputOTP,
+	title: 'UI Components/InputOTP',
+	component: InputOTP,
 };
 export default meta;
 type Story = StoryObj<typeof InputOTP>;
 
 /** 6-digit OTP input split into two groups of three with a separator. */
 export const Default: Story = {
-  render: () => (
-    <InputOTP maxLength={6}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
+	render: () => (
+		<InputOTP maxLength={6}>
+			<InputOTPGroup>
+				<InputOTPSlot index={0} />
+				<InputOTPSlot index={1} />
+				<InputOTPSlot index={2} />
+			</InputOTPGroup>
+			<InputOTPSeparator />
+			<InputOTPGroup>
+				<InputOTPSlot index={3} />
+				<InputOTPSlot index={4} />
+				<InputOTPSlot index={5} />
+			</InputOTPGroup>
+		</InputOTP>
+	),
 };
 
 /** Compact 4-digit PIN input without separator. */
 export const FourDigits: Story = {
-  render: () => (
-    <InputOTP maxLength={4}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
+	render: () => (
+		<InputOTP maxLength={4}>
+			<InputOTPGroup>
+				<InputOTPSlot index={0} />
+				<InputOTPSlot index={1} />
+				<InputOTPSlot index={2} />
+				<InputOTPSlot index={3} />
+			</InputOTPGroup>
+		</InputOTP>
+	),
 };

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

@@ -1,72 +1,72 @@
 'use client';
 
-import * as React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { MinusIcon } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** One-time password input with individual digit slots. Handles paste, backspace, and arrow key navigation automatically. */
 function InputOTP({
-  className,
-  containerClassName,
-  ...props
+	className,
+	containerClassName,
+	...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
+	containerClassName?: string;
 }) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
-      className={cn('disabled:cursor-not-allowed', className)}
-      {...props}
-    />
-  );
+	return (
+		<OTPInput
+			data-slot="input-otp"
+			containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
+			className={cn('disabled:cursor-not-allowed', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Groups InputOTPSlot elements together visually. */
 function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="input-otp-group" className={cn('flex items-center', className)} {...props} />;
+	return <div data-slot="input-otp-group" className={cn('flex items-center', className)} {...props} />;
 }
 
 /** A single digit slot in the OTP input. Shows a blinking caret when active. */
 function InputOTPSlot({
-  index,
-  className,
-  ...props
+	index,
+	className,
+	...props
 }: React.ComponentProps<'div'> & {
-  index: number;
+	index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
 
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  );
+	return (
+		<div
+			data-slot="input-otp-slot"
+			data-active={isActive}
+			className={cn(
+				'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+				</div>
+			)}
+		</div>
+	);
 }
 
 /** Visual separator between groups of OTP slots, typically a dash. */
 function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  );
+	return (
+		<div data-slot="input-otp-separator" role="presentation" aria-hidden="true" {...props}>
+			<MinusIcon />
+		</div>
+	);
 }
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

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

@@ -1,64 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from '@/components/ui/Item';
 import { Button } from '@/components/ui/Button';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '@/components/ui/Item';
 
 const meta: Meta<typeof Item> = {
-  title: 'UI Components/Item',
-  component: Item,
+	title: 'UI Components/Item',
+	component: Item,
 };
 export default meta;
 type Story = StoryObj<typeof Item>;
 
 /** Standard item with title, description, and action buttons. */
 export const Default: Story = {
-  render: () => (
-    <Item>
-      <ItemContent>
-        <ItemTitle>Item Title</ItemTitle>
-        <ItemDescription>This is a description of the item with some details.</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="outline" size="sm">
-          Edit
-        </Button>
-        <Button variant="ghost" size="sm">
-          Delete
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
+	render: () => (
+		<Item>
+			<ItemContent>
+				<ItemTitle>Item Title</ItemTitle>
+				<ItemDescription>This is a description of the item with some details.</ItemDescription>
+			</ItemContent>
+			<ItemActions>
+				<Button variant="outline" size="sm">
+					Edit
+				</Button>
+				<Button variant="ghost" size="sm">
+					Delete
+				</Button>
+			</ItemActions>
+		</Item>
+	),
 };
 
 /** Item with visible border using the outline variant. */
 export const OutlineVariant: Story = {
-  render: () => (
-    <Item variant="outline">
-      <ItemContent>
-        <ItemTitle>Outline Item</ItemTitle>
-        <ItemDescription>An item displayed with the outline variant and a visible border.</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="outline" size="sm">
-          View
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
+	render: () => (
+		<Item variant="outline">
+			<ItemContent>
+				<ItemTitle>Outline Item</ItemTitle>
+				<ItemDescription>An item displayed with the outline variant and a visible border.</ItemDescription>
+			</ItemContent>
+			<ItemActions>
+				<Button variant="outline" size="sm">
+					View
+				</Button>
+			</ItemActions>
+		</Item>
+	),
 };
 
 /** Compact item with reduced padding for dense lists. */
 export const SmallSize: Story = {
-  render: () => (
-    <Item size="sm">
-      <ItemContent>
-        <ItemTitle>Small Item</ItemTitle>
-        <ItemDescription>Compact item with reduced padding.</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="ghost" size="sm">
-          Action
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
+	render: () => (
+		<Item size="sm">
+			<ItemContent>
+				<ItemTitle>Small Item</ItemTitle>
+				<ItemDescription>Compact item with reduced padding.</ItemDescription>
+			</ItemContent>
+			<ItemActions>
+				<Button variant="ghost" size="sm">
+					Action
+				</Button>
+			</ItemActions>
+		</Item>
+	),
 };