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

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

@@ -1,94 +1,94 @@
 'use client';
 
-import * as React from 'react';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** Right-click menu with keyboard navigation. Supports submenus, checkbox/radio items, separators, and shortcuts. */
 function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
 /** The element that opens the context menu on right-click. Wraps its children. */
 function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+	return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
 }
 
 /** Groups related context menu items for accessibility. */
 function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+	return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
 }
 
 /** Renders context menu content into a React portal. */
 function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+	return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
 }
 
 /** Container for a submenu within the context menu. */
 function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+	return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
 }
 
 /** Groups radio items for single-selection within the context menu. */
 function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+	return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
 }
 
 /** Menu item that opens a nested submenu on hover or keyboard navigation. Shows a chevron indicator. */
 function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
+	className,
+	inset,
+	children,
+	...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+	inset?: boolean;
 }) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-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 [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  );
+	return (
+		<ContextMenuPrimitive.SubTrigger
+			data-slot="context-menu-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 [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto" />
+		</ContextMenuPrimitive.SubTrigger>
+	);
 }
 
 /** Popup content for a nested submenu. */
 function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<ContextMenuPrimitive.SubContent
+			data-slot="context-menu-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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The positioned popup container for context menu items. Portals to the document body. */
 function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Content
+				data-slot="context-menu-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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+					className,
+				)}
+				{...props}
+			/>
+		</ContextMenuPrimitive.Portal>
+	);
 }
 
 /**
@@ -96,136 +96,136 @@ function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof
  * Use variant="destructive" for dangerous actions like delete.
  */
 function ContextMenuItem({
-  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 ContextMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
 }) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-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 (
+		<ContextMenuPrimitive.Item
+			data-slot="context-menu-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 toggleable checkbox item within the context menu. Shows a check indicator when active. */
 function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
+	className,
+	children,
+	checked,
+	...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm 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">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  );
+	return (
+		<ContextMenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm 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">
+				<ContextMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.CheckboxItem>
+	);
 }
 
 /** A radio-selectable item within a ContextMenuRadioGroup. Shows a dot indicator when selected. */
 function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm 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">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  );
+	return (
+		<ContextMenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm 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">
+				<ContextMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.RadioItem>
+	);
 }
 
 /** Non-interactive label within a context menu, used for section headings. */
 function ContextMenuLabel({
-  className,
-  inset,
-  ...props
+	className,
+	inset,
+	...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean;
+	inset?: boolean;
 }) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-      {...props}
-    />
-  );
+	return (
+		<ContextMenuPrimitive.Label
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Visual divider between groups of context menu items. */
 function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  );
+	return (
+		<ContextMenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn('bg-border -mx-1 my-1 h-px', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Displays a keyboard shortcut hint aligned to the right side of a context menu item. */
 function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			data-slot="context-menu-shortcut"
+			className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
 };

package/dist/starter/src/components/ui/DesignSystem-Colors.stories.tsx

@@ -1,117 +1,117 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 interface ColorToken {
-  variable: string;
-  utility: string;
+	variable: string;
+	utility: string;
 }
 
 interface ColorGroup {
-  label: string;
-  tokens: ColorToken[];
+	label: string;
+	tokens: ColorToken[];
 }
 
 const colorGroups: ColorGroup[] = [
-  {
-    label: 'Core',
-    tokens: [
-      { variable: '--primary', utility: 'bg-primary' },
-      { variable: '--primary-foreground', utility: 'bg-primary-foreground' },
-      { variable: '--secondary', utility: 'bg-secondary' },
-      { variable: '--secondary-foreground', utility: 'bg-secondary-foreground' },
-      { variable: '--accent', utility: 'bg-accent' },
-      { variable: '--accent-foreground', utility: 'bg-accent-foreground' },
-      { variable: '--muted', utility: 'bg-muted' },
-      { variable: '--muted-foreground', utility: 'bg-muted-foreground' },
-      { variable: '--destructive', utility: 'bg-destructive' },
-      { variable: '--destructive-foreground', utility: 'bg-destructive-foreground' },
-      { variable: '--background', utility: 'bg-background' },
-      { variable: '--foreground', utility: 'bg-foreground' },
-    ],
-  },
-  {
-    label: 'Surface',
-    tokens: [
-      { variable: '--card', utility: 'bg-card' },
-      { variable: '--card-foreground', utility: 'bg-card-foreground' },
-      { variable: '--popover', utility: 'bg-popover' },
-      { variable: '--popover-foreground', utility: 'bg-popover-foreground' },
-    ],
-  },
-  {
-    label: 'UI',
-    tokens: [
-      { variable: '--border', utility: 'bg-border' },
-      { variable: '--input', utility: 'bg-input' },
-      { variable: '--ring', utility: 'bg-ring' },
-    ],
-  },
-  {
-    label: 'Charts',
-    tokens: [
-      { variable: '--chart-1', utility: 'bg-chart-1' },
-      { variable: '--chart-2', utility: 'bg-chart-2' },
-      { variable: '--chart-3', utility: 'bg-chart-3' },
-      { variable: '--chart-4', utility: 'bg-chart-4' },
-      { variable: '--chart-5', utility: 'bg-chart-5' },
-    ],
-  },
-  {
-    label: 'Sidebar',
-    tokens: [
-      { variable: '--sidebar', utility: 'bg-sidebar' },
-      { variable: '--sidebar-foreground', utility: 'bg-sidebar-foreground' },
-      { variable: '--sidebar-primary', utility: 'bg-sidebar-primary' },
-      {
-        variable: '--sidebar-primary-foreground',
-        utility: 'bg-sidebar-primary-foreground',
-      },
-      { variable: '--sidebar-accent', utility: 'bg-sidebar-accent' },
-      {
-        variable: '--sidebar-accent-foreground',
-        utility: 'bg-sidebar-accent-foreground',
-      },
-      { variable: '--sidebar-border', utility: 'bg-sidebar-border' },
-      { variable: '--sidebar-ring', utility: 'bg-sidebar-ring' },
-    ],
-  },
+	{
+		label: 'Core',
+		tokens: [
+			{ variable: '--primary', utility: 'bg-primary' },
+			{ variable: '--primary-foreground', utility: 'bg-primary-foreground' },
+			{ variable: '--secondary', utility: 'bg-secondary' },
+			{ variable: '--secondary-foreground', utility: 'bg-secondary-foreground' },
+			{ variable: '--accent', utility: 'bg-accent' },
+			{ variable: '--accent-foreground', utility: 'bg-accent-foreground' },
+			{ variable: '--muted', utility: 'bg-muted' },
+			{ variable: '--muted-foreground', utility: 'bg-muted-foreground' },
+			{ variable: '--destructive', utility: 'bg-destructive' },
+			{ variable: '--destructive-foreground', utility: 'bg-destructive-foreground' },
+			{ variable: '--background', utility: 'bg-background' },
+			{ variable: '--foreground', utility: 'bg-foreground' },
+		],
+	},
+	{
+		label: 'Surface',
+		tokens: [
+			{ variable: '--card', utility: 'bg-card' },
+			{ variable: '--card-foreground', utility: 'bg-card-foreground' },
+			{ variable: '--popover', utility: 'bg-popover' },
+			{ variable: '--popover-foreground', utility: 'bg-popover-foreground' },
+		],
+	},
+	{
+		label: 'UI',
+		tokens: [
+			{ variable: '--border', utility: 'bg-border' },
+			{ variable: '--input', utility: 'bg-input' },
+			{ variable: '--ring', utility: 'bg-ring' },
+		],
+	},
+	{
+		label: 'Charts',
+		tokens: [
+			{ variable: '--chart-1', utility: 'bg-chart-1' },
+			{ variable: '--chart-2', utility: 'bg-chart-2' },
+			{ variable: '--chart-3', utility: 'bg-chart-3' },
+			{ variable: '--chart-4', utility: 'bg-chart-4' },
+			{ variable: '--chart-5', utility: 'bg-chart-5' },
+		],
+	},
+	{
+		label: 'Sidebar',
+		tokens: [
+			{ variable: '--sidebar', utility: 'bg-sidebar' },
+			{ variable: '--sidebar-foreground', utility: 'bg-sidebar-foreground' },
+			{ variable: '--sidebar-primary', utility: 'bg-sidebar-primary' },
+			{
+				variable: '--sidebar-primary-foreground',
+				utility: 'bg-sidebar-primary-foreground',
+			},
+			{ variable: '--sidebar-accent', utility: 'bg-sidebar-accent' },
+			{
+				variable: '--sidebar-accent-foreground',
+				utility: 'bg-sidebar-accent-foreground',
+			},
+			{ variable: '--sidebar-border', utility: 'bg-sidebar-border' },
+			{ variable: '--sidebar-ring', utility: 'bg-sidebar-ring' },
+		],
+	},
 ];
 
 function ColorSwatch({ variable, utility }: ColorToken) {
-  return (
-    <div className="flex flex-col items-center gap-1.5">
-      <div className="h-16 w-16 rounded-md border border-border" style={{ backgroundColor: `var(${variable})` }} />
-      <span className="text-xs font-mono text-foreground">{variable}</span>
-      <span className="text-xs font-mono text-muted-foreground">{utility}</span>
-    </div>
-  );
+	return (
+		<div className="flex flex-col items-center gap-1.5">
+			<div className="h-16 w-16 rounded-md border border-border" style={{ backgroundColor: `var(${variable})` }} />
+			<span className="text-xs font-mono text-foreground">{variable}</span>
+			<span className="text-xs font-mono text-muted-foreground">{utility}</span>
+		</div>
+	);
 }
 
 function ColorSwatches() {
-  return (
-    <div className="flex flex-col gap-10 p-6">
-      {colorGroups.map((group) => (
-        <section key={group.label}>
-          <h2 className="mb-4 text-lg font-semibold text-foreground">{group.label}</h2>
-          <div className="flex flex-wrap gap-6">
-            {group.tokens.map((token) => (
-              <ColorSwatch key={token.variable} {...token} />
-            ))}
-          </div>
-        </section>
-      ))}
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-10 p-6">
+			{colorGroups.map((group) => (
+				<section key={group.label}>
+					<h2 className="mb-4 text-lg font-semibold text-foreground">{group.label}</h2>
+					<div className="flex flex-wrap gap-6">
+						{group.tokens.map((token) => (
+							<ColorSwatch key={token.variable} {...token} />
+						))}
+					</div>
+				</section>
+			))}
+		</div>
+	);
 }
 
 const meta: Meta = {
-  title: 'Design System/Colors',
-  component: ColorSwatches,
-  tags: ['!autodocs', '!manifest'],
+	title: 'Design System/Colors',
+	component: ColorSwatches,
+	tags: ['!autodocs', '!manifest'],
 };
 export default meta;
 
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => <ColorSwatches />,
+	render: () => <ColorSwatches />,
 };