@auto-engineer/generate-react-client 1.34.0 → 1.36.0

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

@@ -15,6 +15,7 @@ const invoices = [
   { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
 ];
 
+/** Shows a full table with header, body, and caption using invoice data. */
 export const Default: Story = {
   render: () => (
     <Table>
@@ -41,6 +42,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a minimal two-column table without caption or footer. */
 export const Minimal: Story = {
   render: () => (
     <Table>

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

@@ -4,6 +4,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A responsive data table with horizontal scroll overflow.
+ * Compose with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption subcomponents.
+ */
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
     <div data-slot="table-container" className="relative w-full overflow-x-auto">
@@ -12,14 +16,17 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
   );
 }
 
+/** The header section of a Table, rendering a thead with bottom-bordered rows. */
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
   return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
 }
 
+/** The body section of a Table, rendering a tbody with no border on the last row. */
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
   return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
 }
 
+/** The footer section of a Table, rendering a tfoot with a muted background and top border. */
 function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
@@ -30,6 +37,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   );
 }
 
+/** A table row with hover highlight and selected state styling via data-state="selected". */
 function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   return (
     <tr
@@ -40,6 +48,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   );
 }
 
+/** A table header cell with bold text and left alignment. Automatically adjusts padding when containing a checkbox. */
 function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   return (
     <th
@@ -53,6 +62,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   );
 }
 
+/** A table data cell with standard padding and vertical alignment. */
 function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
@@ -66,6 +76,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   );
 }
 
+/** A table caption rendered below the table body in muted text. */
 function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
   return (
     <caption data-slot="table-caption" className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Tabs> = {
 export default meta;
 type Story = StoryObj<typeof Tabs>;
 
+/** Shows the default pill-style tabs with three panels. */
 export const Default: Story = {
   render: () => (
     <Tabs defaultValue="account" className="w-[400px]">
@@ -29,6 +30,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows the line variant where the active tab is indicated by an underline rather than a background. */
 export const LineVariant: Story = {
   render: () => (
     <Tabs defaultValue="overview" className="w-[400px]">

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

@@ -4,6 +4,7 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** Layered content panels activated by tab triggers. Supports horizontal and vertical orientations with keyboard navigation. */
 function Tabs({ className, orientation = 'horizontal', ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
@@ -31,6 +32,9 @@ const tabsListVariants = cva(
   },
 );
 
+/**
+ * The container for tab triggers. Supports "default" (pill background) and "line" (underline indicator) variants.
+ */
 function TabsList({
   className,
   variant = 'default',
@@ -46,6 +50,7 @@ function TabsList({
   );
 }
 
+/** A clickable tab button that activates its associated TabsContent panel. */
 function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
@@ -62,6 +67,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
   );
 }
 
+/** The content panel associated with a tab trigger, shown when its corresponding trigger is active. */
 function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />;
 }

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

@@ -8,14 +8,17 @@ const meta: Meta<typeof Textarea> = {
 export default meta;
 type Story = StoryObj<typeof Textarea>;
 
+/** Shows the textarea in its default empty state. */
 export const Default: Story = {};
 
+/** Shows the textarea with placeholder text. */
 export const WithPlaceholder: Story = {
   args: {
     placeholder: 'Type your message here...',
   },
 };
 
+/** Shows a disabled textarea that cannot receive input. */
 export const Disabled: Story = {
   args: {
     placeholder: 'This textarea is disabled',

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

@@ -2,6 +2,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A multi-line text input that auto-sizes to its content via field-sizing-content.
+ * Supports aria-invalid styling for form validation errors.
+ */
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea

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

@@ -40,6 +40,7 @@ function ToastDemo() {
   );
 }
 
+/** Demonstrates triggering a basic toast notification with a title and description. */
 export const Default: Story = {
   render: () => <ToastDemo />,
 };
@@ -66,6 +67,7 @@ function ToastDestructiveDemo() {
   );
 }
 
+/** Shows a destructive-variant toast for error or warning scenarios. */
 export const Destructive: Story = {
   render: () => <ToastDestructiveDemo />,
 };
@@ -92,10 +94,12 @@ function ToastWithActionDemo() {
   );
 }
 
+/** Shows a toast with an action button (e.g., "Undo") alongside the message. */
 export const WithAction: Story = {
   render: () => <ToastWithActionDemo />,
 };
 
+/** Shows a toast rendered inline (always open) using the primitive subcomponents directly. */
 export const Inline: Story = {
   render: () => (
     <ToastProvider>

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

@@ -7,10 +7,14 @@ import { Toast as ToastPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** Temporary notification at screen edge with swipe-to-dismiss. Supports default and destructive variants. */
+
+/** 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} />;
 }
 
+/** 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
@@ -39,6 +43,7 @@ const toastVariants = cva(
   },
 );
 
+/** An individual toast notification with default or destructive variant styling. */
 function Toast({
   className,
   variant,
@@ -47,6 +52,7 @@ function Toast({
   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
@@ -60,6 +66,7 @@ function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastP
   );
 }
 
+/** 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
@@ -76,6 +83,7 @@ function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPr
   );
 }
 
+/** The bold heading text of a toast notification. */
 function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {
   return (
     <ToastPrimitive.Title
@@ -86,6 +94,7 @@ function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPr
   );
 }
 
+/** The secondary descriptive text of a toast notification. */
 function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>) {
   return (
     <ToastPrimitive.Description

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

@@ -3,6 +3,10 @@
 import { useToast } from '@/hooks/use-toast';
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/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();
 

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof 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',
@@ -16,6 +17,7 @@ export const Default: Story = {
   },
 };
 
+/** Shows the outline variant with a visible border. */
 export const Outline: Story = {
   args: {
     variant: 'outline',
@@ -24,6 +26,7 @@ export const Outline: Story = {
   },
 };
 
+/** Shows a toggle with a text label instead of an icon. */
 export const WithText: Story = {
   args: {
     'aria-label': 'Toggle italic',
@@ -31,6 +34,7 @@ export const WithText: Story = {
   },
 };
 
+/** Shows a toggle in its initially pressed (on) state. */
 export const Pressed: Story = {
   args: {
     defaultPressed: true,

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

@@ -27,6 +27,7 @@ const toggleVariants = cva(
   },
 );
 
+/** A two-state button for toolbar controls. Has "default" (ghost) and "outline" variants in sm/default/lg sizes. */
 function Toggle({
   className,
   variant,

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof 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">
@@ -25,6 +26,7 @@ export const Single: Story = {
   ),
 };
 
+/** Shows a multi-selection toggle group with bold and italic pre-selected. */
 export const Multiple: Story = {
   render: () => (
     <ToggleGroup type="multiple" defaultValue={['bold', 'italic']}>
@@ -41,6 +43,7 @@ export const Multiple: Story = {
   ),
 };
 
+/** Shows a toggle group using the outline variant with visible borders. */
 export const Outline: Story = {
   render: () => (
     <ToggleGroup type="single" variant="outline">

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

@@ -17,10 +17,12 @@ const ToggleGroupContext = React.createContext<
   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
@@ -46,6 +48,7 @@ function ToggleGroup({
   );
 }
 
+/** An individual toggle button within a ToggleGroup. Inherits variant and size from the parent group context. */
 function ToggleGroupItem({
   className,
   children,

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof Tooltip> = {
 export default meta;
 type Story = StoryObj<typeof Tooltip>;
 
+/** Shows a basic tooltip appearing on hover over a button. */
 export const Default: Story = {
   render: () => (
     <TooltipProvider>
@@ -24,6 +25,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a tooltip with additional spacing between the trigger and content via sideOffset. */
 export const WithSideOffset: Story = {
   render: () => (
     <TooltipProvider>

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

@@ -3,18 +3,24 @@ import { Tooltip as TooltipPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** Brief descriptive popup on hover/focus. Has enter/exit animations and arrow indicator. Wrap app in TooltipProvider first. */
+
+/** Provides shared tooltip configuration (e.g., delay duration) for all nested Tooltip instances. */
 function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
   return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
 }
 
+/** The root component that manages open/close state for a single tooltip. */
 function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
+/** The element that triggers the tooltip on hover or focus. */
 function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
+/** The popup content panel rendered via a portal with an arrow indicator. */
 function TooltipContent({
   className,
   sideOffset = 0,

package/package.json

@@ -19,12 +19,12 @@
   },
   "dependencies": {
     "debug": "^4.4.1",
-    "@auto-engineer/message-bus": "1.34.0"
+    "@auto-engineer/message-bus": "1.36.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12"
   },
-  "version": "1.34.0",
+  "version": "1.36.0",
   "scripts": {
     "build": "tsc && tsx ../../scripts/fix-esm-imports.ts && cp -r starter dist/",
     "test-cli": "tsx test-cli.ts",