@auto-engineer/generate-react-client 1.33.0 → 1.35.0

package/dist/starter/scripts/build-component-db.ts

@@ -0,0 +1,157 @@
+import { writeFileSync, mkdirSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseArgs } from "node:util";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const OUTPUT_DIR = resolve(__dirname, "../../.context");
+const OUTPUT_FILE = resolve(OUTPUT_DIR, "components-db.json");
+
+const { values } = parseArgs({
+	options: { port: { type: "string", default: "6006" } },
+});
+const PORT = Number(values.port);
+
+interface IndexEntry {
+	id: string;
+	name: string;
+	title: string;
+	type: string;
+	subtype?: string;
+	exportName: string;
+	tags: string[];
+	componentPath?: string;
+	importPath?: string;
+	storiesImports?: string[];
+}
+
+interface ComponentStory {
+	name: string;
+	snippet: string;
+	description: string;
+}
+
+interface ComponentEntry {
+	id: string;
+	name: string;
+	path: string;
+	stories?: ComponentStory[];
+	import: string;
+	jsDocTags: Record<string, unknown>;
+	description: string;
+	reactDocgen: Record<string, unknown>;
+}
+
+interface ComponentsManifest {
+	v: number;
+	components: Record<string, ComponentEntry>;
+}
+
+interface IndexJson {
+	entries: Record<string, IndexEntry>;
+}
+
+async function checkStorybookRunning(port: number): Promise<void> {
+	const delays = [5000, 10000, 20000];
+	for (let attempt = 0; attempt <= delays.length; attempt++) {
+		try {
+			const response = await fetch(`http://localhost:${port}`);
+			if (!response.ok)
+				throw new Error("Storybook responded with non-OK status");
+			return;
+		} catch {
+			if (attempt === delays.length) {
+				throw new Error(
+					`Storybook is not running on port ${port}. Start it with \`pnpm storybook\` in the client directory.`,
+				);
+			}
+			console.log(
+				`Waiting for Storybook on port ${port}... (attempt ${attempt + 1}/3, retrying in ${delays[attempt] / 1000}s)`,
+			);
+			await new Promise((r) => setTimeout(r, delays[attempt]));
+		}
+	}
+}
+
+async function fetchWithRetry<T>(url: string, maxAttempts = 3): Promise<T> {
+	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+		try {
+			const res = await fetch(url);
+			if (!res.ok)
+				throw new Error(`${url} responded with status ${res.status}`);
+			return await res.json();
+		} catch (err) {
+			if (attempt === maxAttempts) throw err;
+			await new Promise((r) => setTimeout(r, 1000));
+		}
+	}
+	throw new Error("unreachable");
+}
+
+function merge(componentsJson: ComponentsManifest, indexJson: IndexJson) {
+	const entries = indexJson.entries ?? {};
+
+	const storysByComponent = new Map<string, IndexEntry[]>();
+	const docsByComponent = new Map<string, IndexEntry>();
+
+	for (const entry of Object.values(entries)) {
+		const componentId = entry.id.replace(/--.*$/, "");
+
+		if (entry.type === "docs") {
+			docsByComponent.set(componentId, entry);
+		} else {
+			if (!storysByComponent.has(componentId))
+				storysByComponent.set(componentId, []);
+			storysByComponent.get(componentId)!.push(entry);
+		}
+	}
+
+	const components = Object.values(componentsJson.components);
+	return components.map((component) => {
+		const indexStories = storysByComponent.get(component.id) ?? [];
+		const docsEntry = docsByComponent.get(component.id);
+
+		const firstStory = indexStories[0];
+		const merged: Record<string, unknown> = { ...component };
+
+		if (firstStory) {
+			merged.componentPath = firstStory.componentPath;
+			merged.title = firstStory.title;
+			merged.tags = firstStory.tags;
+		}
+
+		if (component.stories) {
+			merged.stories = component.stories.map((story) => {
+				const match = indexStories.find((s) => s.name === story.name);
+				if (!match) return story;
+				return {
+					...story,
+					id: match.id,
+					exportName: match.exportName,
+					type: match.type,
+					subtype: match.subtype,
+				};
+			});
+		}
+
+		if (docsEntry) {
+			merged.docs = docsEntry;
+		}
+
+		return merged;
+	});
+}
+
+await checkStorybookRunning(PORT);
+
+const [componentsJson, indexJson] = await Promise.all([
+	fetchWithRetry<ComponentsManifest>(`http://localhost:${PORT}/manifests/components.json`),
+	fetchWithRetry<IndexJson>(`http://localhost:${PORT}/index.json`),
+]);
+
+const merged = merge(componentsJson, indexJson);
+
+mkdirSync(OUTPUT_DIR, { recursive: true });
+writeFileSync(OUTPUT_FILE, JSON.stringify(merged, null, 2) + "\n");
+
+console.log(`Wrote ${merged.length} components to ${OUTPUT_FILE}`);

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Accordion> = {
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 
+/** Shows the accordion in single-select mode where only one item can be open at a time, with collapsible behavior. */
 export const Default: Story = {
   render: () => (
     <Accordion type="single" collapsible className="w-full max-w-md">
@@ -27,6 +28,7 @@ export const Default: Story = {
   ),
 };
 
+/** Demonstrates multiple panels open simultaneously using `type="multiple"`. */
 export const Multiple: Story = {
   render: () => (
     <Accordion type="multiple" className="w-full max-w-md">

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

@@ -4,10 +4,12 @@ import { Accordion as AccordionPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** Expandable content sections. Use `type="single"` for one open at a time, `type="multiple"` for many. */
 function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
   return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
+/** A single collapsible section within an Accordion, identified by a unique `value` prop. */
 function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
   return (
     <AccordionPrimitive.Item
@@ -18,6 +20,7 @@ function AccordionItem({ className, ...props }: React.ComponentProps<typeof Acco
   );
 }
 
+/** The clickable heading that toggles the visibility of its associated AccordionContent. Renders a chevron icon that rotates when open. */
 function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
   return (
     <AccordionPrimitive.Header className="flex">
@@ -36,6 +39,7 @@ function AccordionTrigger({ className, children, ...props }: React.ComponentProp
   );
 }
 
+/** The collapsible body of an AccordionItem, animated with slide-up/slide-down transitions. */
 function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
   return (
     <AccordionPrimitive.Content

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Alert> = {
 export default meta;
 type Story = StoryObj<typeof Alert>;
 
+/** Shows the default informational alert variant with a title and description. */
 export const Default: Story = {
   render: () => (
     <Alert>
@@ -17,6 +18,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows the destructive variant used for error or warning messages. */
 export const Destructive: Story = {
   render: () => (
     <Alert variant="destructive">

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

@@ -19,10 +19,16 @@ const alertVariants = cva(
   },
 );
 
+/**
+ * Displays a callout message to attract user attention.
+ * Supports `default` and `destructive` variants. Compose with AlertTitle and AlertDescription.
+ * An optional leading SVG icon is automatically laid out in a grid column.
+ */
 function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
   return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
 }
 
+/** The heading of an Alert, rendered as a single-line truncated title. */
 function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -33,6 +39,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
+/** The body text of an Alert, styled in muted foreground for secondary emphasis. */
 function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div

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

@@ -19,6 +19,7 @@ const meta: Meta<typeof AlertDialog> = {
 export default meta;
 type Story = StoryObj<typeof AlertDialog>;
 
+/** Shows a standard confirmation dialog with cancel and continue actions. */
 export const Default: Story = {
   render: () => (
     <AlertDialog>
@@ -42,6 +43,7 @@ export const Default: Story = {
   ),
 };
 
+/** Demonstrates a destructive confirmation using the destructive button variant for dangerous actions like deletion. */
 export const DestructiveAction: Story = {
   render: () => (
     <AlertDialog>

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

@@ -6,18 +6,22 @@ import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
 
+/** A confirmation modal requiring explicit user action. Unlike Dialog, cannot be dismissed by clicking outside. */
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
+/** The element that opens the AlertDialog when clicked. */
 function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
   return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
+/** Portals the dialog content into document.body to avoid z-index and overflow issues. */
 function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
   return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
+/** The semi-transparent backdrop rendered behind the dialog content. */
 function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
   return (
     <AlertDialogPrimitive.Overlay
@@ -31,6 +35,10 @@ function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof
   );
 }
 
+/**
+ * The centered modal panel containing the dialog's content. Automatically renders overlay and portal.
+ * @param size - Controls the max-width: `"default"` for standard dialogs, `"sm"` for compact confirmations.
+ */
 function AlertDialogContent({
   className,
   size = 'default',
@@ -54,6 +62,7 @@ function AlertDialogContent({
   );
 }
 
+/** Layout container for the dialog's title, description, and optional media icon. */
 function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -67,6 +76,7 @@ function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>)
   );
 }
 
+/** Layout container for the dialog's action buttons, typically Cancel and a primary action. */
 function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -80,6 +90,7 @@ function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>)
   );
 }
 
+/** The accessible title of the dialog, announced by screen readers when the dialog opens. */
 function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
   return (
     <AlertDialogPrimitive.Title
@@ -93,6 +104,7 @@ function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof A
   );
 }
 
+/** The accessible description providing additional context about the dialog's purpose. */
 function AlertDialogDescription({
   className,
   ...props
@@ -106,6 +118,7 @@ function AlertDialogDescription({
   );
 }
 
+/** An optional icon or image slot displayed alongside the title in the dialog header. */
 function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -119,6 +132,7 @@ function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>)
   );
 }
 
+/** The primary confirmation button that closes the dialog and triggers the intended action. Renders as a Button. */
 function AlertDialogAction({
   className,
   variant = 'default',
@@ -133,6 +147,7 @@ function AlertDialogAction({
   );
 }
 
+/** The cancel button that dismisses the dialog without taking action. Renders as an outline Button by default. */
 function AlertDialogCancel({
   className,
   variant = 'outline',

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof AspectRatio> = {
 export default meta;
 type Story = StoryObj<typeof AspectRatio>;
 
+/** Shows a 16:9 widescreen aspect ratio container. */
 export const Default: Story = {
   render: () => (
     <div className="w-[450px]">
@@ -20,6 +21,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a 1:1 square aspect ratio container. */
 export const Square: Story = {
   render: () => (
     <div className="w-[300px]">

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

@@ -2,6 +2,10 @@
 
 import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
 
+/**
+ * Constrains its child element to a specified width-to-height ratio (e.g., 16/9, 1/1).
+ * Useful for responsive images, videos, and media containers that must maintain proportions.
+ */
 function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
   return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
 }

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
+/** Shows an avatar with a loaded profile image and fallback initials. */
 export const WithImage: Story = {
   render: () => (
     <Avatar>
@@ -17,6 +18,7 @@ export const WithImage: Story = {
   ),
 };
 
+/** Shows an avatar displaying only fallback initials without an image. */
 export const FallbackOnly: Story = {
   render: () => (
     <Avatar>
@@ -25,6 +27,7 @@ export const FallbackOnly: Story = {
   ),
 };
 
+/** Demonstrates the three available avatar sizes: sm, default, and lg. */
 export const Sizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">

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

@@ -3,8 +3,14 @@ import { Avatar as AvatarPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * Displays a user profile image with a fallback for missing photos.
+ * Compose with AvatarImage, AvatarFallback, and optionally AvatarBadge.
+ * Use AvatarGroup to render overlapping stacks of avatars.
+ */
 function Avatar({
   className,
+  /** Controls the avatar dimensions: `"sm"` (24px), `"default"` (32px), or `"lg"` (40px). */
   size = 'default',
   ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
@@ -23,12 +29,14 @@ function Avatar({
   );
 }
 
+/** The profile image rendered inside an Avatar. Automatically hidden if the image fails to load. */
 function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
   return (
     <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
   );
 }
 
+/** Fallback content shown when AvatarImage is loading or unavailable, typically initials or an icon. */
 function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
   return (
     <AvatarPrimitive.Fallback
@@ -42,6 +50,7 @@ function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Ava
   );
 }
 
+/** A small status indicator (e.g., online/offline dot) positioned at the bottom-right corner of an Avatar. */
 function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
@@ -58,6 +67,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
   );
 }
 
+/** Renders multiple Avatars in an overlapping horizontal stack with ring borders. */
 function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -71,6 +81,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
+/** Displays a count of additional avatars not shown in the group (e.g., "+5"). */
 function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div

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

@@ -8,22 +8,27 @@ const meta: Meta<typeof Badge> = {
 export default meta;
 type Story = StoryObj<typeof Badge>;
 
+/** Shows the primary filled badge variant. */
 export const Default: Story = {
   render: () => <Badge>Default</Badge>,
 };
 
+/** Shows the secondary badge variant with muted background. */
 export const Secondary: Story = {
   render: () => <Badge variant="secondary">Secondary</Badge>,
 };
 
+/** Shows the destructive badge variant for error or warning indicators. */
 export const Destructive: Story = {
   render: () => <Badge variant="destructive">Destructive</Badge>,
 };
 
+/** Shows the outline badge variant with a visible border and no fill. */
 export const Outline: Story = {
   render: () => <Badge variant="outline">Outline</Badge>,
 };
 
+/** Displays all badge variants side by side for visual comparison. */
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap gap-2">

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

@@ -24,9 +24,14 @@ const badgeVariants = cva(
   },
 );
 
+/**
+ * A small label used to highlight status, category, or count.
+ * Supports multiple visual variants: default, secondary, destructive, outline, ghost, and link.
+ */
 function Badge({
   className,
   variant = 'default',
+  /** Merges props onto the child element instead of rendering a span. Use with custom wrapper elements. */
   asChild = false,
   ...props
 }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {

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

@@ -15,6 +15,7 @@ const meta: Meta<typeof Breadcrumb> = {
 export default meta;
 type Story = StoryObj<typeof Breadcrumb>;
 
+/** Shows a three-level breadcrumb trail with home, category, and current page. */
 export const Default: Story = {
   render: () => (
     <Breadcrumb>
@@ -35,6 +36,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a minimal two-level breadcrumb with just a parent link and current page. */
 export const TwoLevels: Story = {
   render: () => (
     <Breadcrumb>

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

@@ -4,10 +4,16 @@ import { Slot } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A navigation aid that shows the user's current location within a site hierarchy.
+ * Compose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator.
+ * Renders as a `<nav>` with `aria-label="breadcrumb"` for accessibility.
+ */
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
+/** The ordered list container for breadcrumb items, handling wrapping and spacing. */
 function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
   return (
     <ol
@@ -21,11 +27,14 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
   );
 }
 
+/** A single step in the breadcrumb trail, wrapping a link or the current page label. */
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
   return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
 }
 
+/** A navigable link within a breadcrumb item. Use `asChild` to render a router Link component instead of an anchor. */
 function BreadcrumbLink({
+  /** Merges props onto the child element instead of rendering an anchor tag. */
   asChild,
   className,
   ...props
@@ -39,6 +48,7 @@ function BreadcrumbLink({
   );
 }
 
+/** The current page label in the breadcrumb trail, marked with `aria-current="page"` and rendered as non-interactive text. */
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
@@ -52,6 +62,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
   );
 }
 
+/** A visual divider between breadcrumb items, defaulting to a chevron-right icon. Pass children to customize the separator. */
 function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
@@ -66,6 +77,7 @@ function BreadcrumbSeparator({ children, className, ...props }: React.ComponentP
   );
 }
 
+/** A "..." indicator used to collapse intermediate breadcrumb levels when the trail is too long. */
 function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span

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

@@ -8,12 +8,14 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
+/** Shows the primary filled button variant. */
 export const Default: Story = {
   args: {
     children: 'Button',
   },
 };
 
+/** Shows the secondary button variant with muted styling. */
 export const Secondary: Story = {
   args: {
     variant: 'secondary',
@@ -21,6 +23,7 @@ export const Secondary: Story = {
   },
 };
 
+/** Shows the destructive button variant for dangerous actions like delete. */
 export const Destructive: Story = {
   args: {
     variant: 'destructive',
@@ -28,6 +31,7 @@ export const Destructive: Story = {
   },
 };
 
+/** Shows the outline button variant with a border and transparent background. */
 export const Outline: Story = {
   args: {
     variant: 'outline',
@@ -35,6 +39,7 @@ export const Outline: Story = {
   },
 };
 
+/** Shows the ghost button variant with no background until hovered. */
 export const Ghost: Story = {
   args: {
     variant: 'ghost',
@@ -42,6 +47,7 @@ export const Ghost: Story = {
   },
 };
 
+/** Shows the link button variant styled as an inline text link with underline on hover. */
 export const Link: Story = {
   args: {
     variant: 'link',
@@ -49,6 +55,7 @@ export const Link: Story = {
   },
 };
 
+/** Shows a compact small-sized button. */
 export const Small: Story = {
   args: {
     size: 'sm',
@@ -56,6 +63,7 @@ export const Small: Story = {
   },
 };
 
+/** Shows a larger button with more padding. */
 export const Large: Story = {
   args: {
     size: 'lg',
@@ -63,6 +71,7 @@ export const Large: Story = {
   },
 };
 
+/** Shows an icon-only square button. */
 export const Icon: Story = {
   args: {
     size: 'icon',
@@ -70,6 +79,7 @@ export const Icon: Story = {
   },
 };
 
+/** Displays all button variants and sizes side by side for visual comparison. */
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-4">

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

@@ -36,10 +36,15 @@ const buttonVariants = cva(
   },
 );
 
+/**
+ * A clickable element that triggers an action or navigation.
+ * Supports six visual variants (default, secondary, destructive, outline, ghost, link) and multiple sizes including icon-only modes.
+ */
 function Button({
   className,
   variant = 'default',
   size = 'default',
+  /** Merges props onto the child element instead of rendering a button. Use with Link or anchor components for navigation. */
   asChild = false,
   ...props
 }: React.ComponentProps<'button'> &

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof ButtonGroup> = {
 export default meta;
 type Story = StoryObj<typeof ButtonGroup>;
 
+/** Shows a horizontal group of three outline buttons with connected borders. */
 export const Default: Story = {
   render: () => (
     <ButtonGroup>
@@ -19,6 +20,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a vertically stacked button group. */
 export const Vertical: Story = {
   render: () => (
     <ButtonGroup orientation="vertical">