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

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

@@ -1,168 +1,167 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
 import { Separator } from '@/components/ui/Separator';
+import { cn } from '@/lib/utils';
 
 /** Container for a list of Item components. Provides list semantics for accessibility. */
 function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div role="list" data-slot="item-group" className={cn('group/item-group flex flex-col', className)} {...props} />
-  );
+	return (
+		<div role="list" data-slot="item-group" className={cn('group/item-group flex flex-col', className)} {...props} />
+	);
 }
 
 /** Horizontal divider between items in an ItemGroup. */
 function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
-  return <Separator data-slot="item-separator" orientation="horizontal" className={cn('my-0', className)} {...props} />;
+	return <Separator data-slot="item-separator" orientation="horizontal" className={cn('my-0', className)} {...props} />;
 }
 
 const itemVariants = cva(
-  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: 'border-border',
-        muted: 'bg-muted/50',
-      },
-      size: {
-        default: 'p-4 gap-4 ',
-        sm: 'py-3 px-4 gap-2.5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
+	'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50',
+			},
+			size: {
+				default: 'p-4 gap-4 ',
+				sm: 'py-3 px-4 gap-2.5',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
 );
 
 /** A flexible list item for displaying structured content like notifications, settings rows, or search results. Compose with ItemMedia, ItemContent, ItemTitle, ItemDescription, and ItemActions. */
 function Item({
-  className,
-  variant = 'default',
-  size = 'default',
-  asChild = false,
-  ...props
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
 }: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : 'div';
-  return (
-    <Comp
-      data-slot="item"
-      data-variant={variant}
-      data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+	const Comp = asChild ? Slot.Root : 'div';
+	return (
+		<Comp
+			data-slot="item"
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
 const itemMediaVariants = cva(
-  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+				image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
 );
 
 /** Container for an icon, avatar, or image at the start of an Item. Use variant="icon" for styled icon backgrounds or variant="image" for thumbnails. */
 function ItemMedia({
-  className,
-  variant = 'default',
-  ...props
+	className,
+	variant = 'default',
+	...props
 }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      data-slot="item-media"
-      data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="item-media"
+			data-variant={variant}
+			className={cn(itemMediaVariants({ variant, className }))}
+			{...props}
+		/>
+	);
 }
 
 /** Main content area of an Item, containing title and description. */
 function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="item-content"
+			className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Primary text label for an Item. */
 function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="item-title"
+			className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Secondary text below the title, limited to 2 lines. */
 function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<p
+			data-slot="item-description"
+			className={cn(
+				'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Container for action buttons at the end of an Item. */
 function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />;
+	return <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />;
 }
 
 /** Full-width header row spanning the top of an Item, with space-between layout. */
 function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn('flex basis-full items-center justify-between gap-2', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="item-header"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Full-width footer row spanning the bottom of an Item, with space-between layout. */
 function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn('flex basis-full items-center justify-between gap-2', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="item-footer"
+			className={cn('flex basis-full items-center justify-between gap-2', className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemActions,
-  ItemGroup,
-  ItemSeparator,
-  ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
+	Item,
+	ItemMedia,
+	ItemContent,
+	ItemActions,
+	ItemGroup,
+	ItemSeparator,
+	ItemTitle,
+	ItemDescription,
+	ItemHeader,
+	ItemFooter,
 };

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

@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Kbd } from './Kbd';
 
 const meta: Meta<typeof Kbd> = {
-  title: 'UI Components/Kbd',
-  component: Kbd,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
+	title: 'UI Components/Kbd',
+	component: Kbd,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
 };
 
 export default meta;
@@ -15,45 +15,45 @@ type Story = StoryObj<typeof meta>;
 
 /** Shows a single keyboard key shortcut. */
 export const Default: Story = {
-  args: {
-    children: '⌘K',
-  },
+	args: {
+		children: '⌘K',
+	},
 };
 
 /** Shows a key with a text label like "Ctrl". */
 export const WithText: Story = {
-  args: {
-    children: 'Ctrl',
-  },
+	args: {
+		children: 'Ctrl',
+	},
 };
 
 /** Shows a key with an arrow symbol. */
 export const ArrowKeys: Story = {
-  args: {
-    children: '→',
-  },
+	args: {
+		children: '→',
+	},
 };
 
 /** Shows two keys composed together to represent a shortcut combination. */
 export const Multiple: Story = {
-  render: () => (
-    <div className="flex gap-2 items-center">
-      <Kbd>⌘</Kbd>
-      <span>+</span>
-      <Kbd>K</Kbd>
-    </div>
-  ),
+	render: () => (
+		<div className="flex gap-2 items-center">
+			<Kbd>⌘</Kbd>
+			<span>+</span>
+			<Kbd>K</Kbd>
+		</div>
+	),
 };
 
 /** Shows a three-key combination shortcut. */
 export const Combination: Story = {
-  render: () => (
-    <div className="flex gap-2 items-center">
-      <Kbd>Ctrl</Kbd>
-      <span>+</span>
-      <Kbd>Shift</Kbd>
-      <span>+</span>
-      <Kbd>P</Kbd>
-    </div>
-  ),
+	render: () => (
+		<div className="flex gap-2 items-center">
+			<Kbd>Ctrl</Kbd>
+			<span>+</span>
+			<Kbd>Shift</Kbd>
+			<span>+</span>
+			<Kbd>P</Kbd>
+		</div>
+	),
 };

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import type React from 'react';
 import { cn } from '@/lib/utils';
 
 interface KbdProps {
-  children: React.ReactNode;
-  className?: string;
+	children: React.ReactNode;
+	className?: string;
 }
 
 /**
@@ -11,12 +11,12 @@ interface KbdProps {
  * Use to display keyboard shortcuts or key combinations in documentation and UI hints.
  */
 export function Kbd({ children, className }: KbdProps) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn('border border-border rounded bg-muted px-1.5 py-0.5 text-xs font-medium', className)}
-    >
-      {children}
-    </kbd>
-  );
+	return (
+		<kbd
+			data-slot="kbd"
+			className={cn('border border-border rounded bg-muted px-1.5 py-0.5 text-xs font-medium', className)}
+		>
+			{children}
+		</kbd>
+	);
 }

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

@@ -2,27 +2,27 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Label } from './Label';
 
 const meta: Meta<typeof Label> = {
-  title: 'UI Components/Label',
-  component: Label,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'radio' },
-      options: ['default', 'required'],
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    htmlFor: {
-      control: { type: 'text' },
-    },
-    children: {
-      control: { type: 'text' },
-    },
-  },
+	title: 'UI Components/Label',
+	component: Label,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		variant: {
+			control: { type: 'radio' },
+			options: ['default', 'required'],
+		},
+		required: {
+			control: { type: 'boolean' },
+		},
+		htmlFor: {
+			control: { type: 'text' },
+		},
+		children: {
+			control: { type: 'text' },
+		},
+	},
 };
 
 export default meta;
@@ -30,61 +30,61 @@ type Story = StoryObj<typeof meta>;
 
 /** Shows a basic label associated with a form field. */
 export const Default: Story = {
-  args: {
-    children: 'Email address',
-    htmlFor: 'email',
-  },
+	args: {
+		children: 'Email address',
+		htmlFor: 'email',
+	},
 };
 
 /** Shows the label with the required prop, which appends a red asterisk. */
 export const Required: Story = {
-  args: {
-    children: 'Email address',
-    htmlFor: 'email',
-    required: true,
-  },
+	args: {
+		children: 'Email address',
+		htmlFor: 'email',
+		required: true,
+	},
 };
 
 /** Shows the label using the "required" variant prop directly. */
 export const RequiredVariant: Story = {
-  args: {
-    children: 'Email address',
-    htmlFor: 'email',
-    variant: 'required',
-  },
+	args: {
+		children: 'Email address',
+		htmlFor: 'email',
+		variant: 'required',
+	},
 };
 
 /** Shows the label paired with a text input in a form layout. */
 export const WithForm: Story = {
-  render: (args) => (
-    <div className="space-y-2">
-      <Label htmlFor="example-input" required>
-        Example Field
-      </Label>
-      <input
-        id="example-input"
-        type="text"
-        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-        placeholder="Enter value..."
-      />
-    </div>
-  ),
+	render: (_args) => (
+		<div className="space-y-2">
+			<Label htmlFor="example-input" required>
+				Example Field
+			</Label>
+			<input
+				id="example-input"
+				type="text"
+				className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+				placeholder="Enter value..."
+			/>
+		</div>
+	),
 };
 
 /** Demonstrates the dimmed appearance when the associated input is disabled. */
 export const DisabledField: Story = {
-  render: (args) => (
-    <div className="space-y-2">
-      <Label htmlFor="disabled-input" required>
-        Disabled Field
-      </Label>
-      <input
-        id="disabled-input"
-        type="text"
-        disabled
-        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-        placeholder="Disabled input..."
-      />
-    </div>
-  ),
+	render: (_args) => (
+		<div className="space-y-2">
+			<Label htmlFor="disabled-input" required>
+				Disabled Field
+			</Label>
+			<input
+				id="disabled-input"
+				type="text"
+				disabled
+				className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+				placeholder="Disabled input..."
+			/>
+		</div>
+	),
 };

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

@@ -1,26 +1,26 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-  {
-    variants: {
-      variant: {
-        default: 'text-foreground',
-        required: "text-foreground after:content-['*'] after:ml-1 after:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+	{
+		variants: {
+			variant: {
+				default: 'text-foreground',
+				required: "text-foreground after:content-['*'] after:ml-1 after:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
 );
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
-  htmlFor?: string;
-  required?: boolean;
-  children?: React.ReactNode;
+	htmlFor?: string;
+	required?: boolean;
+	children?: React.ReactNode;
 }
 
 /**
@@ -28,16 +28,17 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>,
  * Supports a "required" variant that appends a red asterisk, and automatically dims when its peer input is disabled.
  */
 const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, variant, required, ...props }, ref) => {
-  const effectiveVariant = required ? 'required' : variant || 'default';
+	const effectiveVariant = required ? 'required' : variant || 'default';
 
-  return (
-    <label
-      ref={ref}
-      data-slot="label"
-      className={cn(labelVariants({ variant: effectiveVariant }), className)}
-      {...props}
-    />
-  );
+	return (
+		// biome-ignore lint/a11y/noLabelWithoutControl: Label is a generic component - htmlFor is provided by consumers
+		<label
+			ref={ref}
+			data-slot="label"
+			className={cn(labelVariants({ variant: effectiveVariant }), className)}
+			{...props}
+		/>
+	);
 });
 Label.displayName = 'Label';