diff --git a/components/ui/command.tsx b/components/ui/command.tsx index 8cb4ca7..fd96c5d 100644 --- a/components/ui/command.tsx +++ b/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) { @@ -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, -} +} \ No newline at end of file diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index d9ccec9..1270ec5 100644 --- a/components/ui/dialog.tsx +++ b/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) { return } +/** + * 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) { return } +/** + * 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) { return } +/** + * 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) { return } +/** + * 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 (
) { ) } +/** + * 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 (
) { ) } +/** + * 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, -} +} \ No newline at end of file diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 8916905..846500c 100644 --- a/components/ui/input.tsx +++ b/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 element. + * @returns The rendered input element with composed styles and forwarded props. + */ function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( ) { ) } -export { Input } +export { Input } \ No newline at end of file diff --git a/components/ui/label.tsx b/components/ui/label.tsx index fb5fbc3..dc67b82 100644 --- a/components/ui/label.tsx +++ b/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 } \ No newline at end of file diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx index 01e468b..5479c64 100644 --- a/components/ui/popover.tsx +++ b/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) { return } +/** + * 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) { return } +/** + * 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) { return } -export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } \ No newline at end of file diff --git a/components/ui/select.tsx b/components/ui/select.tsx index 25e5439..f951914 100644 --- a/components/ui/select.tsx +++ b/components/ui/select.tsx @@ -6,24 +6,46 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" import { cn } from "@/lib/utils" +/** + * Wraps Radix Select Root by adding a `data-slot="select"` attribute and forwarding all props. + * + * @returns A Radix Select Root element with `data-slot="select"` and the provided props applied. + */ function Select({ ...props }: React.ComponentProps) { return } +/** + * Renders a Radix Select Group element with a `data-slot="select-group"` attribute. + * + * @returns A React element for a select group that forwards all provided props to the underlying Radix Group + */ function SelectGroup({ ...props }: React.ComponentProps) { return } +/** + * Renders a wrapped Radix Select Value element with a fixed `data-slot` attribute. + * + * @param props - Props forwarded to `SelectPrimitive.Value` and applied to the rendered element + * @returns The rendered `SelectPrimitive.Value` element with `data-slot="select-value"` + */ function SelectValue({ ...props }: React.ComponentProps) { return } +/** + * Renders a styled Select trigger with size variants and a chevron icon. + * + * @param size - Controls vertical sizing; `"default"` (height 36px) or `"sm"` (height 32px). Defaults to `"default"`. + * @returns The Select trigger element (a Radix Select Trigger) with applied theme classes, data-slot attributes, and a chevron icon. + */ function SelectTrigger({ className, size = "default", @@ -50,6 +72,15 @@ function SelectTrigger({ ) } +/** + * Render the select's dropdown content inside a portal with built-in scrolling, positioning, and enter/exit animations. + * + * @param className - Additional CSS classes applied to the content container + * @param children - Elements that populate the select viewport + * @param position - Positioning strategy for the content; defaults to `"popper"` + * @param align - Alignment of the content relative to the trigger; defaults to `"center"` + * @returns The rendered Select content element + */ function SelectContent({ className, children, @@ -87,6 +118,11 @@ function SelectContent({ ) } +/** + * Renders a styled label for the Select component. + * + * @returns The rendered Select label element with theming classes and forwarded props. + */ function SelectLabel({ className, ...props @@ -100,6 +136,13 @@ function SelectLabel({ ) } +/** + * Renders a styled select item containing an inline check indicator and the item's text. + * + * Adds a data-slot="select-item" attribute, composes provided `className` with internal styles, and forwards all other props to the underlying Radix Select Item. + * + * @returns A React element representing the select item with its indicator and text. + */ function SelectItem({ className, children, @@ -124,6 +167,12 @@ function SelectItem({ ) } +/** + * Renders a themed separator for the Select dropdown. + * + * @param className - Additional CSS classes to merge with the component's default separator styles. + * @returns A separator element with data-slot="select-separator" and the component's border styling. + */ function SelectSeparator({ className, ...props @@ -137,6 +186,11 @@ function SelectSeparator({ ) } +/** + * Renders a styled "scroll up" control for the Select viewport with an upward chevron icon. + * + * @returns A Select scroll-up button element configured to scroll the Select viewport upward. + */ function SelectScrollUpButton({ className, ...props @@ -155,6 +209,14 @@ function SelectScrollUpButton({ ) } +/** + * Renders a styled scroll-down control for the Select dropdown. + * + * The component wraps Radix's ScrollDownButton, applies theme classes and a + * data-slot attribute, and displays a chevron down icon. + * + * @returns The rendered ScrollDownButton element. + */ function SelectScrollDownButton({ className, ...props @@ -184,4 +246,4 @@ export { SelectSeparator, SelectTrigger, SelectValue, -} +} \ No newline at end of file