📝 Add docstrings to Auth-UI

components/ui/command.tsx

@@ -13,6 +13,14 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 
+/**
+ * Styled wrapper around CmdK's CommandPrimitive that applies default layout and appearance while forwarding props.
+ *
+ * Renders a CommandPrimitive with a predefined base className and `data-slot="command"`, merging any provided
+ * `className` and spreading remaining props onto the primitive.
+ *
+ * @returns The rendered CommandPrimitive element with merged `className` and forwarded props.
+ */
 function Command({
   className,
   ...props
@@ -29,6 +37,17 @@ function Command({
   )
 }
 
+/**
+ * Render a Dialog-backed command palette that wraps the Command component with accessible title and description slots.
+ *
+ * Renders a Dialog containing a visually hidden header (DialogTitle and DialogDescription) and DialogContent that hosts the Command palette. The DialogContent forwards showCloseButton and accepts additional Dialog props.
+ *
+ * @param title - Visible label for the command palette used in the hidden header
+ * @param description - Descriptive text for the command palette used in the hidden header
+ * @param className - Additional class names to apply to the DialogContent container
+ * @param showCloseButton - Whether the DialogContent should render a close button; defaults to `true`
+ * @returns The Dialog element containing the composed Command palette UI
+ */
 function CommandDialog({
   title = "Command Palette",
   description = "Search for a command to run...",
@@ -60,6 +79,16 @@ function CommandDialog({
   )
 }
 
+/**
+ * Renders the command palette's search input with a leading search icon.
+ *
+ * Forwards all received props to the underlying CmdK `CommandPrimitive.Input` and composes
+ * the provided `className` with the component's base input styles.
+ *
+ * @param className - Additional CSS classes appended to the input element's base classes
+ * @param props - Props forwarded to the underlying `CommandPrimitive.Input`
+ * @returns The rendered input wrapper element containing the search icon and the CmdK input
+ */
 function CommandInput({
   className,
   ...props
@@ -82,6 +111,14 @@ function CommandInput({
   )
 }
 
+/**
+ * Renders the list portion of the command palette.
+ *
+ * The element has a max height and vertical scrolling enabled, applies any
+ * provided `className`, and receives `data-slot="command-list"`.
+ *
+ * @returns The React element for the command list with max height, vertical scrolling, and a composed `className`; remaining props are forwarded.
+ */
 function CommandList({
   className,
   ...props
@@ -98,6 +135,11 @@ function CommandList({
   )
 }
 
+/**
+ * Renders the empty-state view shown when the command list has no results.
+ *
+ * @returns A `CommandPrimitive.Empty` element with default vertical padding and centered small text.
+ */
 function CommandEmpty({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
@@ -110,6 +152,11 @@ function CommandEmpty({
   )
 }
 
+/**
+ * Renders a styled command group section used to group related command items.
+ *
+ * @returns A React element representing the command group with `data-slot="command-group"` and composed styling.
+ */
 function CommandGroup({
   className,
   ...props
@@ -126,6 +173,12 @@ function CommandGroup({
   )
 }
 
+/**
+ * Render a styled separator used between command groups or items in the command palette.
+ *
+ * @param className - Additional CSS class names appended to the component's base styles
+ * @returns The separator element for the command palette
+ */
 function CommandSeparator({
   className,
   ...props
@@ -139,6 +192,14 @@ function CommandSeparator({
   )
 }
 
+/**
+ * Renders a styled command palette item for use inside the Command list.
+ *
+ * The component outputs a CommandPrimitive.Item element with a `data-slot="command-item"` attribute and a composed className for selected, disabled, and icon styling. Additional props are forwarded to the underlying primitive.
+ *
+ * @param className - Optional additional CSS classes to merge with the component's base styles.
+ * @returns A React element representing a single command palette item.
+ */
 function CommandItem({
   className,
   ...props
@@ -155,6 +216,11 @@ function CommandItem({
   )
 }
 
+/**
+ * Renders a shortcut badge aligned to the end of a command item.
+ *
+ * @returns The span element containing shortcut text, styled and aligned to the end of the command item.
+ */
 function CommandShortcut({
   className,
   ...props
@@ -181,4 +247,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+}

components/ui/dialog.tsx

@@ -6,30 +6,59 @@ import { XIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * Renders a DialogPrimitive.Root element with data-slot="dialog" and forwards all received props.
+ *
+ * @returns The dialog root element with forwarded props.
+ */
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
+/**
+ * Renders a dialog trigger element and forwards all received props to it.
+ *
+ * @param props - Props to apply to the trigger element (spread onto the rendered element)
+ * @returns The rendered dialog trigger element
+ */
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
+/**
+ * Render a dialog portal element with a standardized `data-slot` attribute.
+ *
+ * @returns A React element representing a dialog portal with `data-slot="dialog-portal"` and the provided props applied
+ */
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
+/**
+ * Renders a dialog close trigger element with data-slot="dialog-close".
+ *
+ * Forwards all received props to the rendered close trigger.
+ *
+ * @returns The rendered dialog close trigger element that closes the dialog when activated.
+ */
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
+/**
+ * Renders the dialog backdrop (overlay) with default positioning, backdrop color, and open/close animation classes.
+ *
+ * @param className - Additional CSS class names to merge with the component's default classes
+ * @returns The overlay element used as the dialog backdrop
+ */
 function DialogOverlay({
   className,
   ...props
@@ -46,6 +75,13 @@ function DialogOverlay({
   )
 }
 
+/**
+ * Renders dialog content centered in a portal with backdrop, animations, and an optional close button.
+ *
+ * @param className - Additional CSS classes to apply to the content container.
+ * @param showCloseButton - If `true`, renders a close button in the top-right corner; defaults to `true`.
+ * @returns The dialog content node composed of Portal, Overlay, and Content, containing the provided children.
+ */
 function DialogContent({
   className,
   children,
@@ -80,6 +116,12 @@ function DialogContent({
   )
 }
 
+/**
+ * Renders the dialog header container with default layout and a `data-slot` attribute for styling and testing.
+ *
+ * @param className - Additional CSS classes to extend or override the default header styles.
+ * @returns The header element wrapping dialog header content.
+ */
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -90,6 +132,14 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
+/**
+ * Layout container for dialog footer actions.
+ *
+ * Renders a `div` with `data-slot="dialog-footer"` that applies a responsive layout: stacked and reversed on small screens and a horizontal row aligned to the end on larger screens. Additional class names are merged into the container and any other `div` props are forwarded.
+ *
+ * @param className - Additional CSS classes to append to the default footer layout
+ * @returns A `div` element used as the dialog footer
+ */
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -103,6 +153,13 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
+/**
+ * Renders a dialog title element with default typography and a `data-slot="dialog-title"` attribute.
+ *
+ * @param className - Additional CSS class names to merge with the default title styles
+ * @param props - All other props are forwarded to the underlying `DialogPrimitive.Title`
+ * @returns A `DialogPrimitive.Title` element with composed class names and the `data-slot="dialog-title"` attribute
+ */
 function DialogTitle({
   className,
   ...props
@@ -116,6 +173,11 @@ function DialogTitle({
   )
 }
 
+/**
+ * Renders a dialog description element with a consistent data-slot and default typography.
+ *
+ * @returns A DialogPrimitive.Description element with `data-slot="dialog-description"`, default muted small-text classes, the provided `className` merged, and all other props forwarded.
+ */
 function DialogDescription({
   className,
   ...props
@@ -140,4 +202,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+}

components/ui/input.tsx

@@ -2,6 +2,14 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * A styled input component that composes project UI classes and forwards native input props.
+ *
+ * @param className - Additional CSS class names to merge with the component's base styles.
+ * @param type - The HTML input `type` attribute (for example, "text", "email", "password").
+ * @param props - Remaining native input props which are spread onto the underlying <input> element.
+ * @returns The rendered input element with composed styles and forwarded props.
+ */
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
@@ -18,4 +26,4 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   )
 }
 
-export { Input }
+export { Input }

components/ui/label.tsx

@@ -5,6 +5,12 @@ import * as LabelPrimitive from "@radix-ui/react-label"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * Styled wrapper around Radix UI's Label primitive that applies default layout, spacing, and typography classes.
+ *
+ * @param className - Additional CSS classes to merge with the component's default classes
+ * @returns A `LabelPrimitive.Root` element with default classes composed with `className` and all other props forwarded
+ */
 function Label({
   className,
   ...props
@@ -21,4 +27,4 @@ function Label({
   )
 }
 
-export { Label }
+export { Label }

components/ui/popover.tsx

@@ -5,18 +5,36 @@ import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * Renders a Popover root element with a `data-slot="popover"` attribute and forwards all props.
+ *
+ * @returns A Popover root element configured with the provided props and `data-slot="popover"`.
+ */
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
 
+/**
+ * Renders a popover trigger element using Radix's Trigger primitive.
+ *
+ * @returns The rendered trigger element with `data-slot="popover-trigger"` and any forwarded props.
+ */
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
+/**
+ * Renders positioned popover content inside a portal with themed styling and entrance/exit animations.
+ *
+ * @param className - Optional additional CSS classes to merge with the component's default styling.
+ * @param align - Alignment of the content relative to the trigger (e.g., `"start"`, `"center"`, `"end"`). Defaults to `"center"`.
+ * @param sideOffset - Distance in pixels between the trigger and the popover content. Defaults to `4`.
+ * @returns A JSX element containing the popover content rendered inside a Radix Portal.
+ */
 function PopoverContent({
   className,
   align = "center",
@@ -39,10 +57,16 @@ function PopoverContent({
   )
 }
 
+/**
+ * Wraps Radix UI's Popover Anchor and forwards all props while adding a data-slot attribute.
+ *
+ * @param props - Props forwarded to `PopoverPrimitive.Anchor`
+ * @returns The rendered Popover Anchor element
+ */
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }