From e2c86ce6a500893cb428eb1a5089693ffbeef640 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 27 Dec 2025 04:25:19 +0000 Subject: [PATCH] Changes before error encountered Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com> --- .../src/components/atoms/controls/Button.tsx | 13 +++++++++++- .../components/atoms/controls/Checkbox.tsx | 5 +++++ .../src/components/atoms/controls/Switch.tsx | 5 +++++ .../src/components/atoms/display/Avatar.tsx | 7 +++++++ .../src/components/atoms/display/Badge.tsx | 6 ++++++ .../components/atoms/display/IconButton.tsx | 6 ++++++ .../src/components/atoms/display/Label.tsx | 6 ++++++ .../components/atoms/feedback/Progress.tsx | 5 +++++ .../components/atoms/feedback/Separator.tsx | 5 +++++ .../components/atoms/feedback/Skeleton.tsx | 5 +++++ .../src/components/atoms/feedback/Spinner.tsx | 7 +++++++ .../src/components/atoms/feedback/Tooltip.tsx | 12 +++++++++++ .../src/components/atoms/inputs/Input.tsx | 6 ++++++ .../components/ui/atoms/controls/Button.tsx | 13 +++++++++++- .../components/ui/atoms/controls/Checkbox.tsx | 6 ++++++ .../components/ui/atoms/controls/Slider.tsx | 4 ++++ .../components/ui/atoms/controls/Switch.tsx | 6 ++++++ .../components/ui/atoms/controls/Toggle.tsx | 11 ++++++++++ .../components/ui/atoms/display/Avatar.tsx | 4 ++++ .../src/components/ui/atoms/display/Badge.tsx | 8 ++++++++ .../src/components/ui/atoms/display/Label.tsx | 6 ++++++ .../components/ui/atoms/feedback/Progress.tsx | 5 +++++ .../ui/atoms/feedback/Separator.tsx | 6 ++++++ .../components/ui/atoms/feedback/Skeleton.tsx | 4 ++++ .../src/components/ui/atoms/inputs/Input.tsx | 5 +++++ .../components/ui/atoms/inputs/Textarea.tsx | 20 +++++++++++++++++++ 26 files changed, 184 insertions(+), 2 deletions(-) diff --git a/frontends/nextjs/src/components/atoms/controls/Button.tsx b/frontends/nextjs/src/components/atoms/controls/Button.tsx index c6699f548..229d5e5a0 100644 --- a/frontends/nextjs/src/components/atoms/controls/Button.tsx +++ b/frontends/nextjs/src/components/atoms/controls/Button.tsx @@ -3,14 +3,25 @@ import { forwardRef } from 'react' import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress } from '@mui/material' +/** Button visual style variants */ export type ButtonVariant = 'contained' | 'outlined' | 'text' | 'destructive' | 'ghost' + +/** Button size options */ export type ButtonSize = 'small' | 'medium' | 'large' | 'icon' +/** + * Props for the Button component + * @extends {MuiButtonProps} Inherits Material-UI Button props + */ export interface ButtonProps extends Omit { + /** Visual style variant of the button */ variant?: ButtonVariant + /** Size of the button */ size?: ButtonSize + /** Whether to show a loading spinner */ loading?: boolean - asChild?: boolean // Compatibility prop - ignored + /** Compatibility prop - ignored */ + asChild?: boolean } const Button = forwardRef( diff --git a/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx b/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx index 045f3aee5..c8bb2ab8e 100644 --- a/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx +++ b/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx @@ -7,7 +7,12 @@ import { FormControlLabel, } from '@mui/material' +/** + * Props for the Checkbox component + * @extends {MuiCheckboxProps} Inherits Material-UI Checkbox props + */ export interface CheckboxProps extends MuiCheckboxProps { + /** Optional label text to display next to the checkbox */ label?: string } diff --git a/frontends/nextjs/src/components/atoms/controls/Switch.tsx b/frontends/nextjs/src/components/atoms/controls/Switch.tsx index e6ee0bdee..ba3ae947f 100644 --- a/frontends/nextjs/src/components/atoms/controls/Switch.tsx +++ b/frontends/nextjs/src/components/atoms/controls/Switch.tsx @@ -8,7 +8,12 @@ import { type MuiSwitchProps = ComponentProps +/** + * Props for the Switch component + * @extends {MuiSwitchProps} Inherits Material-UI Switch props + */ export interface SwitchProps extends MuiSwitchProps { + /** Optional label text to display next to the switch */ label?: string } diff --git a/frontends/nextjs/src/components/atoms/display/Avatar.tsx b/frontends/nextjs/src/components/atoms/display/Avatar.tsx index 20c59ad6e..bebaf9236 100644 --- a/frontends/nextjs/src/components/atoms/display/Avatar.tsx +++ b/frontends/nextjs/src/components/atoms/display/Avatar.tsx @@ -8,10 +8,17 @@ import { AvatarGroupProps as MuiAvatarGroupProps, } from '@mui/material' +/** Avatar size options */ export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' +/** + * Props for the Avatar component + * @extends {MuiAvatarProps} Inherits Material-UI Avatar props + */ export interface AvatarProps extends Omit { + /** Size of the avatar (xs: 24px, sm: 32px, md: 40px, lg: 56px, xl: 80px) */ size?: AvatarSize + /** Fallback text to display when no image is provided */ fallback?: string } diff --git a/frontends/nextjs/src/components/atoms/display/Badge.tsx b/frontends/nextjs/src/components/atoms/display/Badge.tsx index 7076f938c..3e871ce4a 100644 --- a/frontends/nextjs/src/components/atoms/display/Badge.tsx +++ b/frontends/nextjs/src/components/atoms/display/Badge.tsx @@ -3,9 +3,15 @@ import { forwardRef, HTMLAttributes } from 'react' import { Chip, ChipProps } from '@mui/material' +/** Badge visual style variants */ export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' +/** + * Props for the Badge component + * @extends {ChipProps} Inherits Material-UI Chip props + */ export interface BadgeProps extends Omit { + /** Visual style variant of the badge */ variant?: BadgeVariant } diff --git a/frontends/nextjs/src/components/atoms/display/IconButton.tsx b/frontends/nextjs/src/components/atoms/display/IconButton.tsx index 077809ad0..6ca02a380 100644 --- a/frontends/nextjs/src/components/atoms/display/IconButton.tsx +++ b/frontends/nextjs/src/components/atoms/display/IconButton.tsx @@ -6,9 +6,15 @@ import { IconButtonProps as MuiIconButtonProps, } from '@mui/material' +/** IconButton size options */ export type IconButtonSize = 'small' | 'medium' | 'large' +/** + * Props for the IconButton component + * @extends {MuiIconButtonProps} Inherits Material-UI IconButton props + */ export interface IconButtonProps extends MuiIconButtonProps { + /** Visual style variant of the icon button */ variant?: 'default' | 'outlined' | 'contained' } diff --git a/frontends/nextjs/src/components/atoms/display/Label.tsx b/frontends/nextjs/src/components/atoms/display/Label.tsx index 5ece1dfb3..f9783e47c 100644 --- a/frontends/nextjs/src/components/atoms/display/Label.tsx +++ b/frontends/nextjs/src/components/atoms/display/Label.tsx @@ -3,8 +3,14 @@ import { forwardRef, LabelHTMLAttributes } from 'react' import { Typography } from '@mui/material' +/** + * Props for the Label component + * @extends {LabelHTMLAttributes} Inherits HTML label element attributes + */ export interface LabelProps extends LabelHTMLAttributes { + /** Whether to display a required indicator (*) */ required?: boolean + /** Whether to style the label as an error state */ error?: boolean } diff --git a/frontends/nextjs/src/components/atoms/feedback/Progress.tsx b/frontends/nextjs/src/components/atoms/feedback/Progress.tsx index 86b5c6da3..d07b98ddd 100644 --- a/frontends/nextjs/src/components/atoms/feedback/Progress.tsx +++ b/frontends/nextjs/src/components/atoms/feedback/Progress.tsx @@ -10,7 +10,12 @@ import { Typography, } from '@mui/material' +/** + * Props for the Progress component + * @extends {LinearProgressProps} Inherits Material-UI LinearProgress props + */ export interface ProgressProps extends LinearProgressProps { + /** Whether to display a percentage label next to the progress bar */ showLabel?: boolean } diff --git a/frontends/nextjs/src/components/atoms/feedback/Separator.tsx b/frontends/nextjs/src/components/atoms/feedback/Separator.tsx index f51022c2f..d8ddc499f 100644 --- a/frontends/nextjs/src/components/atoms/feedback/Separator.tsx +++ b/frontends/nextjs/src/components/atoms/feedback/Separator.tsx @@ -3,7 +3,12 @@ import { forwardRef } from 'react' import { Divider, DividerProps } from '@mui/material' +/** + * Props for the Separator component + * @extends {DividerProps} Inherits Material-UI Divider props + */ export interface SeparatorProps extends DividerProps { + /** Whether the separator is decorative (for accessibility) */ decorative?: boolean } diff --git a/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx b/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx index 44a966ea1..2d2256f3d 100644 --- a/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx +++ b/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx @@ -5,7 +5,12 @@ import { Skeleton as MuiSkeleton } from '@mui/material' type MuiSkeletonProps = ComponentProps +/** + * Props for the Skeleton component + * @extends {MuiSkeletonProps} Inherits Material-UI Skeleton props + */ export interface SkeletonProps extends MuiSkeletonProps { + /** CSS class name for custom styling */ className?: string } diff --git a/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx b/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx index 94f1ca6e3..afa41fb8e 100644 --- a/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx +++ b/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx @@ -3,10 +3,17 @@ import { forwardRef } from 'react' import { CircularProgress, CircularProgressProps, Box } from '@mui/material' +/** Spinner size options */ export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' +/** + * Props for the Spinner component + * @extends {CircularProgressProps} Inherits Material-UI CircularProgress props + */ export interface SpinnerProps extends Omit { + /** Size of the spinner (xs: 16px, sm: 20px, md: 24px, lg: 40px) or a custom number */ size?: SpinnerSize | number + /** Whether to center the spinner in its container */ centered?: boolean } diff --git a/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx b/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx index 37306ea8d..8234c3d92 100644 --- a/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx +++ b/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx @@ -7,15 +7,27 @@ import { type MuiTooltipProps = ComponentProps +/** + * Props for the Tooltip component + */ export interface TooltipProps { + /** The element that triggers the tooltip */ children: ReactElement + /** Title or main content of the tooltip */ title?: ReactNode + /** Alias for title - main content of the tooltip */ content?: ReactNode + /** Position of the tooltip relative to its trigger */ side?: 'top' | 'right' | 'bottom' | 'left' + /** Delay in milliseconds before showing the tooltip */ delayDuration?: number + /** Whether to display an arrow pointing to the trigger element */ arrow?: boolean + /** Controlled open state */ open?: boolean + /** Callback when tooltip is opened */ onOpen?: () => void + /** Callback when tooltip is closed */ onClose?: () => void } diff --git a/frontends/nextjs/src/components/atoms/inputs/Input.tsx b/frontends/nextjs/src/components/atoms/inputs/Input.tsx index 161b5c109..a87e662ea 100644 --- a/frontends/nextjs/src/components/atoms/inputs/Input.tsx +++ b/frontends/nextjs/src/components/atoms/inputs/Input.tsx @@ -3,8 +3,14 @@ import { forwardRef } from 'react' import { InputBase, InputBaseProps } from '@mui/material' +/** + * Props for the Input component + * @extends {InputBaseProps} Inherits Material-UI InputBase props + */ export interface InputProps extends Omit { + /** Whether the input is in an error state */ error?: boolean + /** Whether the input should take up the full width of its container */ fullWidth?: boolean } diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx index 0d07853d4..3177920e4 100644 --- a/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx +++ b/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx @@ -3,15 +3,26 @@ import { forwardRef, type AnchorHTMLAttributes } from 'react' import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material' +/** Button visual style variants */ export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' + +/** Button size options */ export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' +/** + * Props for the Button component + * @extends {MuiButtonProps} Inherits Material-UI Button props + */ export interface ButtonProps extends Omit { + /** Visual style variant of the button */ variant?: ButtonVariant + /** Size of the button */ size?: ButtonSize + /** Compatibility prop - ignored */ asChild?: boolean - // Support link props when component="a" + /** Target attribute for link buttons */ target?: AnchorHTMLAttributes['target'] + /** Rel attribute for link buttons */ rel?: AnchorHTMLAttributes['rel'] } diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx index 352c9e493..110b22ade 100644 --- a/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx +++ b/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx @@ -3,8 +3,14 @@ import { forwardRef } from 'react' import { Checkbox as MuiCheckbox, CheckboxProps as MuiCheckboxProps } from '@mui/material' +/** + * Props for the Checkbox component + * @extends {MuiCheckboxProps} Inherits Material-UI Checkbox props + */ export interface CheckboxProps extends Omit { + /** Callback when checked state changes (alternative to onChange) */ onCheckedChange?: (checked: boolean) => void + /** Standard onChange handler */ onChange?: MuiCheckboxProps['onChange'] } diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx index 10df7f339..8c63cf6de 100644 --- a/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx +++ b/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx @@ -3,6 +3,10 @@ import { forwardRef } from 'react' import { Slider as MuiSlider, SliderProps as MuiSliderProps } from '@mui/material' +/** + * Props for the Slider component + * @extends {MuiSliderProps} Inherits Material-UI Slider props + */ export type SliderProps = MuiSliderProps const Slider = forwardRef( diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx index c0f523040..6f9b5f092 100644 --- a/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx +++ b/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx @@ -3,8 +3,14 @@ import { forwardRef } from 'react' import { Switch as MuiSwitch, SwitchProps as MuiSwitchProps } from '@mui/material' +/** + * Props for the Switch component + * @extends {MuiSwitchProps} Inherits Material-UI Switch props + */ export interface SwitchProps extends Omit { + /** Callback when checked state changes (alternative to onChange) */ onCheckedChange?: (checked: boolean) => void + /** Standard onChange handler */ onChange?: MuiSwitchProps['onChange'] } diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx index db25b4043..e778ae7e1 100644 --- a/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx +++ b/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx @@ -4,13 +4,24 @@ import { forwardRef } from 'react' import { IconButton, IconButtonProps } from '@mui/material' import { ToggleButton as MuiToggleButton, ToggleButtonProps as MuiToggleButtonProps } from '@mui/material' +/** Toggle button visual style variants */ export type ToggleVariant = 'default' | 'outline' + +/** Toggle button size options */ export type ToggleSize = 'default' | 'sm' | 'lg' +/** + * Props for the Toggle component + * @extends {MuiToggleButtonProps} Inherits Material-UI ToggleButton props + */ export interface ToggleProps extends Omit { + /** Visual style variant of the toggle button */ variant?: ToggleVariant + /** Size of the toggle button */ size?: ToggleSize + /** Controlled pressed state */ pressed?: boolean + /** Callback when pressed state changes */ onPressedChange?: (pressed: boolean) => void } diff --git a/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx b/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx index 1cc89fcd2..a320bbcbe 100644 --- a/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx +++ b/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx @@ -3,6 +3,10 @@ import { forwardRef } from 'react' import { Avatar as MuiAvatar, AvatarProps as MuiAvatarProps } from '@mui/material' +/** + * Props for the Avatar component + * @extends {MuiAvatarProps} Inherits Material-UI Avatar props + */ export type AvatarProps = MuiAvatarProps const Avatar = forwardRef( diff --git a/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx b/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx index 2cd4cd241..57682374a 100644 --- a/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx +++ b/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx @@ -3,12 +3,20 @@ import { forwardRef, ReactNode } from 'react' import { Chip, ChipProps, SxProps, Theme } from '@mui/material' +/** Badge visual style variants */ export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' +/** + * Props for the Badge component + */ export interface BadgeProps { + /** Visual style variant of the badge */ variant?: BadgeVariant + /** Content to display inside the badge */ children?: ReactNode + /** CSS class name for custom styling */ className?: string + /** Custom styles for the badge */ sx?: SxProps } diff --git a/frontends/nextjs/src/components/ui/atoms/display/Label.tsx b/frontends/nextjs/src/components/ui/atoms/display/Label.tsx index a3b535d8a..200d88367 100644 --- a/frontends/nextjs/src/components/ui/atoms/display/Label.tsx +++ b/frontends/nextjs/src/components/ui/atoms/display/Label.tsx @@ -3,8 +3,14 @@ import { forwardRef, LabelHTMLAttributes, ReactNode } from 'react' import { FormLabel, FormLabelProps } from '@mui/material' +/** + * Props for the Label component + * @extends {FormLabelProps} Inherits Material-UI FormLabel props + */ export interface LabelProps extends FormLabelProps { + /** ID of the form element this label is associated with */ htmlFor?: string + /** Content to display inside the label */ children?: ReactNode } diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx index b41885220..8474b8a99 100644 --- a/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx +++ b/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx @@ -3,7 +3,12 @@ import { forwardRef } from 'react' import { LinearProgress, LinearProgressProps, CircularProgress, CircularProgressProps } from '@mui/material' +/** + * Props for the Progress component + * @extends {LinearProgressProps} Inherits Material-UI LinearProgress props + */ export interface ProgressProps extends LinearProgressProps { + /** Progress value (0-100) for determinate mode */ value?: number } diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx index 3972ce17b..23dc75f8e 100644 --- a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx +++ b/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx @@ -3,8 +3,14 @@ import { forwardRef } from 'react' import { Divider, DividerProps } from '@mui/material' +/** + * Props for the Separator component + * @extends {DividerProps} Inherits Material-UI Divider props + */ export interface SeparatorProps extends DividerProps { + /** Direction of the separator */ orientation?: 'horizontal' | 'vertical' + /** Whether the separator is decorative (for accessibility) */ decorative?: boolean } diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx index d6953dadc..58bc4c788 100644 --- a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx +++ b/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx @@ -3,6 +3,10 @@ import { forwardRef } from 'react' import { Skeleton as MuiSkeleton, SkeletonProps as MuiSkeletonProps } from '@mui/material' +/** + * Props for the Skeleton component + * @extends {MuiSkeletonProps} Inherits Material-UI Skeleton props + */ export type SkeletonProps = MuiSkeletonProps const Skeleton = forwardRef( diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx b/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx index 96fcc0138..460836598 100644 --- a/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx +++ b/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx @@ -3,7 +3,12 @@ import { forwardRef, InputHTMLAttributes } from 'react' import { InputBase } from '@mui/material' +/** + * Props for the Input component + * @extends {InputHTMLAttributes} Inherits HTML input element attributes + */ export interface InputProps extends Omit, 'size'> { + /** Whether the input is in an error state */ error?: boolean } diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx b/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx index b6572c698..838e379f1 100644 --- a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx +++ b/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx @@ -3,23 +3,43 @@ import { forwardRef } from 'react' import { InputBase, InputBaseProps } from '@mui/material' +/** + * Props for the Textarea component + */ export interface TextareaProps { + /** Whether the textarea is in an error state */ error?: boolean + /** Whether the textarea is disabled */ disabled?: boolean + /** Placeholder text to display when empty */ placeholder?: string + /** Controlled value */ value?: string + /** Default value for uncontrolled mode */ defaultValue?: string + /** Callback when value changes */ onChange?: (event: React.ChangeEvent) => void + /** Callback when textarea loses focus */ onBlur?: (event: React.FocusEvent) => void + /** Callback when textarea receives focus */ onFocus?: (event: React.FocusEvent) => void + /** Form field name */ name?: string + /** Element ID */ id?: string + /** Number of visible rows */ rows?: number + /** Minimum number of rows (for auto-resize) */ minRows?: number + /** Maximum number of rows (for auto-resize) */ maxRows?: number + /** CSS class name for custom styling */ className?: string + /** Whether the field is required */ required?: boolean + /** Whether the textarea is read-only */ readOnly?: boolean + /** Whether to auto-focus on mount */ autoFocus?: boolean }