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

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

@@ -1,78 +1,78 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarShortcut,
+	Menubar,
+	MenubarContent,
+	MenubarItem,
+	MenubarLabel,
+	MenubarMenu,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarTrigger,
 } from '@/components/ui/Menubar';
 
 const meta: Meta<typeof Menubar> = {
-  title: 'UI Components/Menubar',
-  component: Menubar,
+	title: 'UI Components/Menubar',
+	component: Menubar,
 };
 export default meta;
 type Story = StoryObj<typeof Menubar>;
 
 /** Shows a menubar with File and Edit menus containing items and keyboard shortcuts. */
 export const Default: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Exit</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Cut</MenubarItem>
-          <MenubarItem>Copy</MenubarItem>
-          <MenubarItem>Paste</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
+	render: () => (
+		<Menubar>
+			<MenubarMenu>
+				<MenubarTrigger>File</MenubarTrigger>
+				<MenubarContent>
+					<MenubarItem>
+						New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>
+					</MenubarItem>
+					<MenubarItem>
+						New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>
+					</MenubarItem>
+					<MenubarSeparator />
+					<MenubarItem>
+						Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
+					</MenubarItem>
+					<MenubarSeparator />
+					<MenubarItem>Exit</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+			<MenubarMenu>
+				<MenubarTrigger>Edit</MenubarTrigger>
+				<MenubarContent>
+					<MenubarItem>
+						Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
+					</MenubarItem>
+					<MenubarItem>
+						Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
+					</MenubarItem>
+					<MenubarSeparator />
+					<MenubarItem>Cut</MenubarItem>
+					<MenubarItem>Copy</MenubarItem>
+					<MenubarItem>Paste</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+		</Menubar>
+	),
 };
 
 /** Demonstrates menu sections organized with labels to group related items. */
 export const WithLabels: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarLabel>Appearance</MenubarLabel>
-          <MenubarItem>Zoom In</MenubarItem>
-          <MenubarItem>Zoom Out</MenubarItem>
-          <MenubarSeparator />
-          <MenubarLabel>Layout</MenubarLabel>
-          <MenubarItem>Full Screen</MenubarItem>
-          <MenubarItem>Side by Side</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
+	render: () => (
+		<Menubar>
+			<MenubarMenu>
+				<MenubarTrigger>View</MenubarTrigger>
+				<MenubarContent>
+					<MenubarLabel>Appearance</MenubarLabel>
+					<MenubarItem>Zoom In</MenubarItem>
+					<MenubarItem>Zoom Out</MenubarItem>
+					<MenubarSeparator />
+					<MenubarLabel>Layout</MenubarLabel>
+					<MenubarItem>Full Screen</MenubarItem>
+					<MenubarItem>Side by Side</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+		</Menubar>
+	),
 };

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

@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { Menubar as MenubarPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -11,241 +11,241 @@ import { cn } from '@/lib/utils';
  * Compose with MenubarMenu, MenubarTrigger, and MenubarContent to create top-level menu groups with keyboard navigation.
  */
 function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', className)}
-      {...props}
-    />
-  );
+	return (
+		<MenubarPrimitive.Root
+			data-slot="menubar"
+			className={cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', className)}
+			{...props}
+		/>
+	);
 }
 
 /** A single menu within the menubar that wraps a trigger and its dropdown content. */
 function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+	return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
 }
 
 function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+	return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
 }
 
 function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+	return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
 }
 
 function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />;
+	return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />;
 }
 
 /** The button that toggles a menu open within the menubar. */
 function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<MenubarPrimitive.Trigger
+			data-slot="menubar-trigger"
+			className={cn(
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The dropdown panel that appears when a MenubarTrigger is activated. Renders via a portal. */
 function MenubarContent({
-  className,
-  align = 'start',
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
+	className,
+	align = 'start',
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in 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 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
-          className,
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  );
+	return (
+		<MenubarPortal>
+			<MenubarPrimitive.Content
+				data-slot="menubar-content"
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in 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 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPortal>
+	);
 }
 
 /** An interactive item within a menubar dropdown. Supports an inset layout and a destructive variant. */
 function MenubarItem({
-  className,
-  /** Adds left padding to align with items that have icons or indicators. */
-  inset,
-  /** Use "destructive" for dangerous actions. */
-  variant = 'default',
-  ...props
+	className,
+	/** Adds left padding to align with items that have icons or indicators. */
+	inset,
+	/** Use "destructive" for dangerous actions. */
+	variant = 'default',
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
 }) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<MenubarPrimitive.Item
+			data-slot="menubar-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A menu item with a checkbox indicator for toggling boolean options. */
 function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
+	className,
+	children,
+	checked,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  );
+	return (
+		<MenubarPrimitive.CheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.CheckboxItem>
+	);
 }
 
 /** A menu item within a MenubarRadioGroup that shows a radio dot when selected. */
 function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  );
+	return (
+		<MenubarPrimitive.RadioItem
+			data-slot="menubar-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.RadioItem>
+	);
 }
 
 function MenubarLabel({
-  className,
-  inset,
-  ...props
+	className,
+	inset,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean;
+	inset?: boolean;
 }) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-      {...props}
-    />
-  );
+	return (
+		<MenubarPrimitive.Label
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  );
+	return (
+		<MenubarPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn('bg-border -mx-1 my-1 h-px', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Displays a keyboard shortcut hint aligned to the right of a menu item. */
 function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+			{...props}
+		/>
+	);
 }
 
 function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+	return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 
 /** The trigger for a nested submenu, rendering a chevron icon to indicate expandability. */
 function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
+	className,
+	inset,
+	children,
+	...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean;
+	inset?: boolean;
 }) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  );
+	return (
+		<MenubarPrimitive.SubTrigger
+			data-slot="menubar-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto h-4 w-4" />
+		</MenubarPrimitive.SubTrigger>
+	);
 }
 
 /** The dropdown content panel for a nested submenu. */
 function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-sub-content"
-      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 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<MenubarPrimitive.SubContent
+			data-slot="menubar-sub-content"
+			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 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
+	Menubar,
+	MenubarPortal,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarGroup,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarItem,
+	MenubarShortcut,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent,
 };

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

@@ -2,44 +2,44 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { NativeSelect, NativeSelectOption } from '@/components/ui/NativeSelect';
 
 const meta: Meta<typeof NativeSelect> = {
-  title: 'UI Components/NativeSelect',
-  component: NativeSelect,
+	title: 'UI Components/NativeSelect',
+	component: NativeSelect,
 };
 export default meta;
 type Story = StoryObj<typeof NativeSelect>;
 
 /** Shows a native select with pre-selected value and several options. */
 export const Default: Story = {
-  render: () => (
-    <NativeSelect defaultValue="react">
-      <NativeSelectOption value="react">React</NativeSelectOption>
-      <NativeSelectOption value="vue">Vue</NativeSelectOption>
-      <NativeSelectOption value="angular">Angular</NativeSelectOption>
-      <NativeSelectOption value="svelte">Svelte</NativeSelectOption>
-    </NativeSelect>
-  ),
+	render: () => (
+		<NativeSelect defaultValue="react">
+			<NativeSelectOption value="react">React</NativeSelectOption>
+			<NativeSelectOption value="vue">Vue</NativeSelectOption>
+			<NativeSelectOption value="angular">Angular</NativeSelectOption>
+			<NativeSelectOption value="svelte">Svelte</NativeSelectOption>
+		</NativeSelect>
+	),
 };
 
 /** Shows the compact size variant with a disabled placeholder option. */
 export const Small: Story = {
-  render: () => (
-    <NativeSelect size="sm" defaultValue="">
-      <NativeSelectOption value="" disabled>
-        Select a fruit...
-      </NativeSelectOption>
-      <NativeSelectOption value="apple">Apple</NativeSelectOption>
-      <NativeSelectOption value="banana">Banana</NativeSelectOption>
-      <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
-    </NativeSelect>
-  ),
+	render: () => (
+		<NativeSelect size="sm" defaultValue="">
+			<NativeSelectOption value="" disabled>
+				Select a fruit...
+			</NativeSelectOption>
+			<NativeSelectOption value="apple">Apple</NativeSelectOption>
+			<NativeSelectOption value="banana">Banana</NativeSelectOption>
+			<NativeSelectOption value="cherry">Cherry</NativeSelectOption>
+		</NativeSelect>
+	),
 };
 
 /** Shows the select in a disabled state. */
 export const Disabled: Story = {
-  render: () => (
-    <NativeSelect disabled defaultValue="react">
-      <NativeSelectOption value="react">React</NativeSelectOption>
-      <NativeSelectOption value="vue">Vue</NativeSelectOption>
-    </NativeSelect>
-  ),
+	render: () => (
+		<NativeSelect disabled defaultValue="react">
+			<NativeSelectOption value="react">React</NativeSelectOption>
+			<NativeSelectOption value="vue">Vue</NativeSelectOption>
+		</NativeSelect>
+	),
 };