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

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

@@ -16,6 +16,7 @@ const meta: Meta<typeof Pagination> = {
 export default meta;
 type Story = StoryObj<typeof Pagination>;
 
+/** Shows a full pagination bar with previous/next, numbered links, and an ellipsis. */
 export const Default: Story = {
   render: () => (
     <Pagination>
@@ -48,6 +49,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a compact pagination for a small number of pages without ellipsis. */
 export const FewPages: Story = {
   render: () => (
     <Pagination>

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

@@ -4,6 +4,10 @@ import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-re
 import { cn } from '@/lib/utils';
 import { buttonVariants, type Button } from '@/components/ui/Button';
 
+/**
+ * A navigation component for paginated content, rendered as a semantic nav element.
+ * Compose with PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.
+ */
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
@@ -29,6 +33,7 @@ type PaginationLinkProps = {
 } & Pick<React.ComponentProps<typeof Button>, 'size'> &
   React.ComponentProps<'a'>;
 
+/** A page number link that renders as outlined when active and ghost when inactive. */
 function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {
   return (
     <a
@@ -47,6 +52,7 @@ function PaginationLink({ className, isActive, size = 'icon', ...props }: Pagina
   );
 }
 
+/** A "Previous" link with a left chevron icon for navigating to the prior page. */
 function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
@@ -61,6 +67,7 @@ function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof
   );
 }
 
+/** A "Next" link with a right chevron icon for navigating to the following page. */
 function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
@@ -75,6 +82,7 @@ function PaginationNext({ className, ...props }: React.ComponentProps<typeof Pag
   );
 }
 
+/** A visual ellipsis indicator representing skipped page numbers. */
 function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof Popover> = {
 export default meta;
 type Story = StoryObj<typeof Popover>;
 
+/** Shows a popover with form inputs for setting dimensions. */
 export const Default: Story = {
   render: () => (
     <Popover>
@@ -37,6 +38,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a popover with simple informational text content. */
 export const SimpleText: Story = {
   render: () => (
     <Popover>

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

@@ -3,14 +3,17 @@ import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** A floating panel anchored to a trigger for rich content on click. */
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
+/** The element that toggles the popover open and closed when clicked. */
 function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
+/** The floating content panel rendered via a portal with animated enter/exit transitions. */
 function PopoverContent({
   className,
   align = 'center',
@@ -33,10 +36,12 @@ function PopoverContent({
   );
 }
 
+/** An optional custom anchor element to position the popover relative to instead of the trigger. */
 function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
+/** A layout wrapper for the popover's title and description. */
 function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return <div data-slot="popover-header" className={cn('flex flex-col gap-1 text-sm', className)} {...props} />;
 }

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Progress> = {
 export default meta;
 type Story = StoryObj<typeof Progress>;
 
+/** Shows the progress bar at 50% with an adjustable value control. */
 export const Default: Story = {
   args: {
     value: 50,
@@ -15,14 +16,17 @@ export const Default: Story = {
   render: (args) => <Progress {...args} className="w-[60%]" />,
 };
 
+/** Shows the progress bar at 0% (empty state). */
 export const Empty: Story = {
   render: () => <Progress value={0} className="w-[60%]" />,
 };
 
+/** Shows the progress bar at 50%. */
 export const Half: Story = {
   render: () => <Progress value={50} className="w-[60%]" />,
 };
 
+/** Shows the progress bar at 100% (complete state). */
 export const Full: Story = {
   render: () => <Progress value={100} className="w-[60%]" />,
 };

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

@@ -5,6 +5,7 @@ import { Progress as ProgressPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** A horizontal progress bar. Set `value` (0-100) to control fill level. */
 function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof RadioGroup> = {
 export default meta;
 type Story = StoryObj<typeof RadioGroup>;
 
+/** Shows a vertical radio group with three options and a pre-selected value. */
 export const Default: Story = {
   render: () => (
     <RadioGroup defaultValue="comfortable">
@@ -28,6 +29,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a horizontally laid out radio group. */
 export const Horizontal: Story = {
   render: () => (
     <RadioGroup defaultValue="medium" className="flex flex-row gap-4">

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

@@ -4,10 +4,15 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A set of mutually exclusive radio options built on Radix UI RadioGroup primitive.
+ * Compose with RadioGroupItem and Label to create accessible radio button groups.
+ */
 function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
   return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn('grid gap-3', className)} {...props} />;
 }
 
+/** An individual radio button that displays a filled dot when selected. */
 function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
   return (
     <RadioGroupPrimitive.Item

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof ResizablePanelGroup> = {
 export default meta;
 type Story = StoryObj<typeof ResizablePanelGroup>;
 
+/** Shows two resizable panels split equally with a minimal divider. */
 export const Default: Story = {
   render: () => (
     <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
@@ -26,6 +27,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows two panels with a visible grip handle on the divider. */
 export const WithHandle: Story = {
   render: () => (
     <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
@@ -44,6 +46,7 @@ export const WithHandle: Story = {
   ),
 };
 
+/** Shows three resizable panels with grip handles between them. */
 export const ThreePanels: Story = {
   render: () => (
     <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] max-w-lg rounded-lg border">

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

@@ -5,6 +5,10 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A container for resizable panels that can be dragged to adjust their sizes.
+ * Built on react-resizable-panels. Compose with ResizablePanel and ResizableHandle.
+ */
 function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
   return (
     <ResizablePrimitive.Group
@@ -15,11 +19,14 @@ function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupPr
   );
 }
 
+/** A panel within a ResizablePanelGroup whose size can be adjusted by dragging adjacent handles. */
 function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
+/** A draggable divider between resizable panels. Set withHandle to show a visible grip icon. */
 function ResizableHandle({
+  /** When true, renders a visible grip icon on the handle for better discoverability. */
   withHandle,
   className,
   ...props

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

@@ -11,6 +11,7 @@ type Story = StoryObj<typeof ScrollArea>;
 
 const tags = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
 
+/** Shows a vertical scroll area with a long list of items. */
 export const Default: Story = {
   render: () => (
     <ScrollArea className="h-72 w-48 rounded-md border">
@@ -27,6 +28,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a horizontal scroll area with a row of cards. */
 export const Horizontal: Story = {
   render: () => (
     <ScrollArea className="w-96 whitespace-nowrap rounded-md border">

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

@@ -3,6 +3,10 @@ import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A custom scrollable container with styled scrollbars, built on Radix UI ScrollArea primitive.
+ * Replaces native browser scrollbars with consistent cross-platform styled scrollbars.
+ */
 function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
   return (
     <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
@@ -18,6 +22,7 @@ function ScrollArea({ className, children, ...props }: React.ComponentProps<type
   );
 }
 
+/** A styled scrollbar track and thumb. Defaults to vertical; set orientation="horizontal" for horizontal scrolling. */
 function ScrollBar({
   className,
   orientation = 'vertical',

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

@@ -16,6 +16,7 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type Story = StoryObj<typeof Select>;
 
+/** Shows a basic select with a list of fruit options. */
 export const Default: Story = {
   render: () => (
     <Select>
@@ -33,6 +34,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows options organized into labeled groups for categorized selection. */
 export const Grouped: Story = {
   render: () => (
     <Select>

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

@@ -6,6 +6,10 @@ import { Select as SelectPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A custom dropdown select menu built on Radix UI Select primitive.
+ * Compose with SelectTrigger, SelectValue, SelectContent, and SelectItem for a fully accessible select experience.
+ */
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
@@ -18,8 +22,10 @@ function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.V
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
+/** The button that opens the select dropdown, displaying the currently selected value. */
 function SelectTrigger({
   className,
+  /** Controls the height: "default" (36px) or "sm" (32px). */
   size = 'default',
   children,
   ...props
@@ -44,6 +50,7 @@ function SelectTrigger({
   );
 }
 
+/** The dropdown panel containing the list of select options, rendered via a portal. */
 function SelectContent({
   className,
   children,
@@ -81,6 +88,7 @@ function SelectContent({
   );
 }
 
+/** A non-interactive label used to title a group of select options within SelectGroup. */
 function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
@@ -91,6 +99,7 @@ function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select
   );
 }
 
+/** A selectable option within the dropdown that shows a checkmark when selected. */
 function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Separator> = {
 export default meta;
 type Story = StoryObj<typeof Separator>;
 
+/** Shows both horizontal and vertical separators dividing content sections. */
 export const Default: Story = {
   render: () => (
     <div>
@@ -27,6 +28,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows vertical separators between inline text items. */
 export const Vertical: Story = {
   render: () => (
     <div className="flex h-12 items-center space-x-4 text-sm">

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

@@ -3,6 +3,7 @@ import { Separator as SeparatorPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** A visual divider between content sections. Renders as horizontal or vertical line. Decorative by default (hidden from screen readers). */
 function Separator({
   className,
   orientation = 'horizontal',

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof Sheet> = {
 export default meta;
 type Story = StoryObj<typeof Sheet>;
 
+/** Shows a sheet sliding in from the right with a profile editing form. */
 export const Default: Story = {
   render: () => (
     <Sheet>
@@ -35,6 +36,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a sheet sliding in from the left with navigation links. */
 export const LeftSide: Story = {
   render: () => (
     <Sheet>

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

@@ -6,6 +6,11 @@ import { Dialog as SheetPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A panel that slides in from an edge of the screen, built on Radix UI Dialog primitive.
+ * Use for secondary content like navigation, filters, or forms that don't warrant a full page.
+ * Compose with SheetTrigger, SheetContent, SheetHeader, SheetTitle, and SheetDescription.
+ */
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
@@ -35,10 +40,13 @@ function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Sheet
   );
 }
 
+/** The sliding panel content. Use the side prop to control which edge it slides from (top, right, bottom, left). */
 function SheetContent({
   className,
   children,
+  /** Which edge the panel slides from: top, right, bottom, or left. */
   side = 'right',
+  /** Whether to show the X close button in the top-right corner. */
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {

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

@@ -28,6 +28,7 @@ const menuItems = [
   { label: 'Settings', icon: SettingsIcon },
 ];
 
+/** Shows a complete sidebar with header, navigation group, footer, and a toggle trigger in the main area. */
 export const Default: Story = {
   render: () => (
     <SidebarProvider>
@@ -62,6 +63,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows the sidebar with the first menu item highlighted as the active page. */
 export const WithActiveItem: Story = {
   render: () => (
     <SidebarProvider>

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

@@ -40,6 +40,10 @@ function useSidebar() {
   return context;
 }
 
+/**
+ * Context provider that manages sidebar open/collapsed state, mobile responsiveness, and keyboard shortcut (Cmd+B).
+ * Wrap your layout with this to enable sidebar state management for all child Sidebar components.
+ */
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -132,9 +136,16 @@ function SidebarProvider({
   );
 }
 
+/**
+ * A responsive sidebar navigation panel that collapses on mobile into a Sheet overlay.
+ * Supports left/right placement, multiple visual variants (sidebar, floating, inset), and collapsible modes (offcanvas, icon, none).
+ */
 function Sidebar({
+  /** Which edge of the viewport the sidebar is placed on. */
   side = 'left',
+  /** Visual style: "sidebar" (bordered), "floating" (rounded with shadow), or "inset" (embedded). */
   variant = 'sidebar',
+  /** Collapse behavior: "offcanvas" (slides off-screen), "icon" (collapses to icon width), or "none" (always visible). */
   collapsible = 'offcanvas',
   className,
   children,
@@ -231,6 +242,7 @@ function Sidebar({
   );
 }
 
+/** A button that toggles the sidebar open/closed state. */
 function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
   const { toggleSidebar } = useSidebar();
 
@@ -253,6 +265,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
   );
 }
 
+/** A thin hover-activated rail along the sidebar edge that toggles collapse on click. */
 function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
   const { toggleSidebar } = useSidebar();
 
@@ -278,6 +291,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
   );
 }
 
+/** The main content area that sits alongside the sidebar, adjusting its margin based on sidebar state. */
 function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
   return (
     <main
@@ -336,6 +350,7 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
   );
 }
 
+/** The scrollable main body area of the sidebar that holds SidebarGroup sections. */
 function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -350,6 +365,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
+/** A logical grouping of sidebar menu items, optionally with a label and action button. */
 function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
@@ -361,6 +377,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
+/** A small heading label for a SidebarGroup. Hidden when the sidebar is collapsed to icon mode. */
 function SidebarGroupLabel({
   className,
   asChild = false,
@@ -460,6 +477,7 @@ const sidebarMenuButtonVariants = cva(
   },
 );
 
+/** An interactive menu item button with optional tooltip support when collapsed. Supports active state highlighting and size variants. */
 function SidebarMenuButton({
   asChild = false,
   isActive = false,
@@ -505,6 +523,7 @@ function SidebarMenuButton({
   );
 }
 
+/** An action button (e.g., delete, settings) positioned to the right of a SidebarMenuButton. */
 function SidebarMenuAction({
   className,
   asChild = false,
@@ -589,6 +608,7 @@ function SidebarMenuSkeleton({
   );
 }
 
+/** A nested sub-menu list indented under a parent menu item with a left border. */
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
   return (
     <ul

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

@@ -8,6 +8,7 @@ const meta: Meta<typeof Skeleton> = {
 export default meta;
 type Story = StoryObj<typeof Skeleton>;
 
+/** Shows a skeleton mimicking a user profile layout with an avatar circle and two text lines. */
 export const Default: Story = {
   render: () => (
     <div className="flex items-center space-x-4">
@@ -20,6 +21,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a skeleton mimicking a full card layout with image, text, and avatar placeholders. */
 export const CardSkeleton: Story = {
   render: () => (
     <div className="w-[300px] space-y-4 rounded-lg border p-4">

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

@@ -1,5 +1,9 @@
 import { cn } from '@/lib/utils';
 
+/**
+ * A placeholder element that animates with a pulse effect to indicate content is loading.
+ * Use to mirror the shape of upcoming content (e.g., text lines, avatars, cards) and reduce perceived load time.
+ */
 function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
 }

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

@@ -8,14 +8,17 @@ const meta: Meta<typeof Slider> = {
 export default meta;
 type Story = StoryObj<typeof Slider>;
 
+/** Shows a single-thumb slider at 50% of a 0-100 range. */
 export const Default: Story = {
   render: () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />,
 };
 
+/** Demonstrates a dual-thumb range slider for selecting a value range between 25 and 75. */
 export const Range: Story = {
   render: () => <Slider defaultValue={[25, 75]} max={100} step={1} className="w-[60%]" />,
 };
 
+/** Shows a slider with discrete step increments of 10. */
 export const WithSteps: Story = {
   render: () => <Slider defaultValue={[20]} max={100} step={10} className="w-[60%]" />,
 };

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

@@ -3,6 +3,7 @@ import { Slider as SliderPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** A draggable range input. Supports single or multiple thumbs (range selection), keyboard navigation, and vertical orientation. */
 function Slider({
   className,
   defaultValue,

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

@@ -18,6 +18,7 @@ const meta: Meta<typeof Toaster> = {
 export default meta;
 type Story = StoryObj<typeof Toaster>;
 
+/** Demonstrates all toast variants (default, success, error, warning, info) triggered by buttons. */
 export const Default: Story = {
   render: () => (
     <div>

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

@@ -4,6 +4,10 @@ import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon
 import { useTheme } from 'next-themes';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
+/**
+ * A pre-configured Sonner toast container that integrates with the app's theme system.
+ * Provides styled icons for success, info, warning, error, and loading states. Place once at the app root and trigger toasts via the `toast()` function from sonner.
+ */
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();
 

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

@@ -8,14 +8,17 @@ const meta: Meta<typeof Spinner> = {
 export default meta;
 type Story = StoryObj<typeof Spinner>;
 
+/** Shows the spinner at its default size (16px). */
 export const Default: Story = {};
 
+/** Shows a smaller 12px spinner for inline or compact contexts. */
 export const Small: Story = {
   args: {
     className: 'size-3',
   },
 };
 
+/** Shows a larger 32px spinner for full-page or section-level loading states. */
 export const Large: Story = {
   args: {
     className: 'size-8',

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

@@ -2,6 +2,10 @@ import { Loader2Icon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * An animated spinning loader icon that indicates an in-progress operation.
+ * Includes role="status" and an aria-label for accessibility. Resize via className (e.g., "size-8").
+ */
 function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
   return <Loader2Icon role="status" aria-label="Loading" className={cn('size-4 animate-spin', className)} {...props} />;
 }

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

@@ -9,20 +9,24 @@ const meta: Meta<typeof Switch> = {
 export default meta;
 type Story = StoryObj<typeof Switch>;
 
+/** Shows the switch in its default unchecked state. */
 export const Default: Story = {};
 
+/** Shows the switch in its checked (on) state. */
 export const Checked: Story = {
   args: {
     defaultChecked: true,
   },
 };
 
+/** Shows a disabled switch that cannot be interacted with. */
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
 };
 
+/** Shows the switch paired with an associated label element for accessible labeling. */
 export const WithLabel: Story = {
   render: () => (
     <div className="flex items-center gap-2">

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

@@ -3,8 +3,10 @@ import { Switch as SwitchPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** A sliding on/off toggle control with WAI-ARIA switch role and keyboard support. */
 function Switch({
   className,
+  /** Controls the physical dimensions of the switch track and thumb. */
   size = 'default',
   ...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & {