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

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

@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 import { Toast as ToastPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -11,98 +11,98 @@ import { cn } from '@/lib/utils';
 
 /** Provides the toast context for managing toast state and swipe behavior. */
 function ToastProvider({ ...props }: React.ComponentProps<typeof ToastPrimitive.Provider>) {
-  return <ToastPrimitive.Provider data-slot="toast-provider" {...props} />;
+	return <ToastPrimitive.Provider data-slot="toast-provider" {...props} />;
 }
 
 /** The fixed-position viewport where toasts are rendered, positioned at bottom-right on larger screens. */
 function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>) {
-  return (
-    <ToastPrimitive.Viewport
-      data-slot="toast-viewport"
-      className={cn(
-        'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<ToastPrimitive.Viewport
+			data-slot="toast-viewport"
+			className={cn(
+				'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+	{
+		variants: {
+			variant: {
+				default: 'border bg-background text-foreground',
+				destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
 );
 
 /** An individual toast notification with default or destructive variant styling. */
 function Toast({
-  className,
-  variant,
-  ...props
+	className,
+	variant,
+	...props
 }: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>) {
-  return <ToastPrimitive.Root data-slot="toast" className={cn(toastVariants({ variant }), className)} {...props} />;
+	return <ToastPrimitive.Root data-slot="toast" className={cn(toastVariants({ variant }), className)} {...props} />;
 }
 
 /** An action button displayed within a toast, such as "Undo" or "Retry". */
 function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>) {
-  return (
-    <ToastPrimitive.Action
-      data-slot="toast-action"
-      className={cn(
-        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<ToastPrimitive.Action
+			data-slot="toast-action"
+			className={cn(
+				'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A close button positioned in the top-right corner of a toast, visible on hover. */
 function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>) {
-  return (
-    <ToastPrimitive.Close
-      data-slot="toast-close"
-      className={cn(
-        'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-        className,
-      )}
-      toast-close=""
-      {...props}
-    >
-      <XIcon className="h-4 w-4" />
-    </ToastPrimitive.Close>
-  );
+	return (
+		<ToastPrimitive.Close
+			data-slot="toast-close"
+			className={cn(
+				'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+				className,
+			)}
+			toast-close=""
+			{...props}
+		>
+			<XIcon className="h-4 w-4" />
+		</ToastPrimitive.Close>
+	);
 }
 
 /** The bold heading text of a toast notification. */
 function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {
-  return (
-    <ToastPrimitive.Title
-      data-slot="toast-title"
-      className={cn('text-sm font-semibold [&+div]:text-xs', className)}
-      {...props}
-    />
-  );
+	return (
+		<ToastPrimitive.Title
+			data-slot="toast-title"
+			className={cn('text-sm font-semibold [&+div]:text-xs', className)}
+			{...props}
+		/>
+	);
 }
 
 /** The secondary descriptive text of a toast notification. */
 function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>) {
-  return (
-    <ToastPrimitive.Description
-      data-slot="toast-description"
-      className={cn('text-sm opacity-90', className)}
-      {...props}
-    />
-  );
+	return (
+		<ToastPrimitive.Description
+			data-slot="toast-description"
+			className={cn('text-sm opacity-90', className)}
+			{...props}
+		/>
+	);
 }
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
@@ -110,14 +110,14 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-  toastVariants,
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
+	toastVariants,
 };

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

@@ -1,32 +1,30 @@
 'use client';
 
-import { useToast } from '@/hooks/use-toast';
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/Toast';
+import { useToast } from '@/hooks/use-toast';
 
 /**
  * Renders all active toasts from the useToast hook into a fixed-position viewport.
  * Place once at the app root to enable imperative toast notifications via the useToast hook.
  */
 function Toaster() {
-  const { toasts } = useToast();
+	const { toasts } = useToast();
 
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
+	return (
+		<ToastProvider>
+			{toasts.map(({ id, title, description, action, ...props }) => (
+				<Toast key={id} {...props}>
+					<div className="grid gap-1">
+						{title && <ToastTitle>{title}</ToastTitle>}
+						{description && <ToastDescription>{description}</ToastDescription>}
+					</div>
+					{action}
+					<ToastClose />
+				</Toast>
+			))}
+			<ToastViewport />
+		</ToastProvider>
+	);
 }
 
 export { Toaster };

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

@@ -3,42 +3,42 @@ import { BoldIcon } from 'lucide-react';
 import { Toggle } from '@/components/ui/Toggle';
 
 const meta: Meta<typeof Toggle> = {
-  title: 'UI Components/Toggle',
-  component: Toggle,
+	title: 'UI Components/Toggle',
+	component: Toggle,
 };
 export default meta;
 type Story = StoryObj<typeof Toggle>;
 
 /** Shows a toggle button with a bold icon in the default ghost variant. */
 export const Default: Story = {
-  args: {
-    'aria-label': 'Toggle bold',
-    children: <BoldIcon />,
-  },
+	args: {
+		'aria-label': 'Toggle bold',
+		children: <BoldIcon />,
+	},
 };
 
 /** Shows the outline variant with a visible border. */
 export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    'aria-label': 'Toggle bold',
-    children: <BoldIcon />,
-  },
+	args: {
+		variant: 'outline',
+		'aria-label': 'Toggle bold',
+		children: <BoldIcon />,
+	},
 };
 
 /** Shows a toggle with a text label instead of an icon. */
 export const WithText: Story = {
-  args: {
-    'aria-label': 'Toggle italic',
-    children: 'Italic',
-  },
+	args: {
+		'aria-label': 'Toggle italic',
+		children: 'Italic',
+	},
 };
 
 /** Shows a toggle in its initially pressed (on) state. */
 export const Pressed: Story = {
-  args: {
-    defaultPressed: true,
-    'aria-label': 'Toggle bold',
-    children: <BoldIcon />,
-  },
+	args: {
+		defaultPressed: true,
+		'aria-label': 'Toggle bold',
+		children: <BoldIcon />,
+	},
 };

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

@@ -1,42 +1,42 @@
 'use client';
 
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as TogglePrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+			},
+			size: {
+				default: 'h-9 px-2 min-w-9',
+				sm: 'h-8 px-1.5 min-w-8',
+				lg: 'h-10 px-2.5 min-w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
 );
 
 /** A two-state button for toolbar controls. Has "default" (ghost) and "outline" variants in sm/default/lg sizes. */
 function Toggle({
-  className,
-  variant,
-  size,
-  ...props
+	className,
+	variant,
+	size,
+	...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
-  );
+	return (
+		<TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
+	);
 }
 
 export { Toggle, toggleVariants };

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

@@ -3,59 +3,59 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/ToggleGroup';
 
 const meta: Meta<typeof ToggleGroup> = {
-  title: 'UI Components/ToggleGroup',
-  component: ToggleGroup,
+	title: 'UI Components/ToggleGroup',
+	component: ToggleGroup,
 };
 export default meta;
 type Story = StoryObj<typeof ToggleGroup>;
 
 /** Shows a single-selection toggle group where only one item can be active at a time. */
 export const Single: Story = {
-  render: () => (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
+	render: () => (
+		<ToggleGroup type="single">
+			<ToggleGroupItem value="bold" aria-label="Toggle bold">
+				<BoldIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="italic" aria-label="Toggle italic">
+				<ItalicIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="underline" aria-label="Toggle underline">
+				<UnderlineIcon />
+			</ToggleGroupItem>
+		</ToggleGroup>
+	),
 };
 
 /** Shows a multi-selection toggle group with bold and italic pre-selected. */
 export const Multiple: Story = {
-  render: () => (
-    <ToggleGroup type="multiple" defaultValue={['bold', 'italic']}>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
+	render: () => (
+		<ToggleGroup type="multiple" defaultValue={['bold', 'italic']}>
+			<ToggleGroupItem value="bold" aria-label="Toggle bold">
+				<BoldIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="italic" aria-label="Toggle italic">
+				<ItalicIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="underline" aria-label="Toggle underline">
+				<UnderlineIcon />
+			</ToggleGroupItem>
+		</ToggleGroup>
+	),
 };
 
 /** Shows a toggle group using the outline variant with visible borders. */
 export const Outline: Story = {
-  render: () => (
-    <ToggleGroup type="single" variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
+	render: () => (
+		<ToggleGroup type="single" variant="outline">
+			<ToggleGroupItem value="bold" aria-label="Toggle bold">
+				<BoldIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="italic" aria-label="Toggle italic">
+				<ItalicIcon />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="underline" aria-label="Toggle underline">
+				<UnderlineIcon />
+			</ToggleGroupItem>
+		</ToggleGroup>
+	),
 };

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

@@ -1,83 +1,82 @@
 'use client';
 
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 import { toggleVariants } from '@/components/ui/Toggle';
+import { cn } from '@/lib/utils';
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-  }
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+	}
 >({
-  size: 'default',
-  variant: 'default',
-  spacing: 0,
+	size: 'default',
+	variant: 'default',
+	spacing: 0,
 });
 
 /** A group of toggles where one (`type="single"`) or multiple (`type="multiple"`) can be active. */
 function ToggleGroup({
-  className,
-  variant,
-  size,
-  /** Controls gap between items. When 0, items are visually joined with shared borders. */
-  spacing = 0,
-  children,
-  ...props
+	className,
+	variant,
+	size,
+	/** Controls gap between items. When 0, items are visually joined with shared borders. */
+	spacing = 0,
+	children,
+	...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ '--gap': spacing } as React.CSSProperties}
-      className={cn(
-        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
-        className,
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>{children}</ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+	}) {
+	return (
+		<ToggleGroupPrimitive.Root
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			data-spacing={spacing}
+			style={{ '--gap': spacing } as React.CSSProperties}
+			className={cn(
+				'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider value={{ variant, size, spacing }}>{children}</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive.Root>
+	);
 }
 
 /** An individual toggle button within a ToggleGroup. Inherits variant and size from the parent group context. */
 function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
+	className,
+	children,
+	variant,
+	size,
+	...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
+	const context = React.useContext(ToggleGroupContext);
 
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
-        'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
+	return (
+		<ToggleGroupPrimitive.Item
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
+			data-spacing={context.spacing}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+				'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
 }
 
 export { ToggleGroup, ToggleGroupItem };