tcce-design-system 0.3.22 → 0.3.23

package/dist/tcce-design-system-components.d.ts

@@ -122,6 +122,14 @@ declare type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'd
 
 export declare const baseFieldStyles: RuleSet<object>;
 
+/**
+ * Base props shared across all form field components.
+ * Extends standard HTML input attributes while providing consistent sizing and state management.
+ * @param size - The size variant of the form field. Default is 'md'.
+ * @param hasError - When true, displays the field in an error state with error styling.
+ * @param disabled - When true, disables the field and prevents user interaction.
+ * @param className - Additional CSS class names for custom styling.
+ */
 export declare interface BaseFormFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size?: FormFieldSize;
     hasError?: boolean;
@@ -129,8 +137,39 @@ export declare interface BaseFormFieldProps extends Omit<InputHTMLAttributes<HTM
     className?: string;
 }
 
+/**
+ * BaseInput is the foundational text input component with support for icons, multiple types, sizes, and states.
+ *
+ * Features:
+ * - Multiple sizes (xs, sm, md, lg) with appropriate text sizing
+ * - Icon support on both left and right sides
+ * - Various input types (text, email, password, number, tel, url)
+ * - Error and disabled states with visual feedback
+ * - Flushed variant for minimal styling
+ * - Full HTML input attributes support
+ *
+ * @example
+ * ```tsx
+ * <BaseInput
+ *   placeholder="Enter email"
+ *   type="email"
+ *   leftIcon={RiMailLine}
+ *   size="md"
+ * />
+ * ```
+ */
 export declare const BaseInput: ForwardRefExoticComponent<BaseInputProps & RefAttributes<HTMLInputElement>>;
 
+/**
+ * Props for the BaseInput component.
+ * Extends BaseFormFieldProps with input-specific properties and icon support.
+ * @param type - HTML input type determining keyboard and validation behavior. Default is 'text'.
+ * @param flushed - When true, applies a minimal style with only a bottom border. Default is false.
+ * @param leftIcon - Optional icon component displayed on the left side of the input.
+ * @param rightIcon - Optional icon component displayed on the right side of the input.
+ * @param iconSize - Size of the left and right icons ('tn', 'sm', 'md'). Default is 'md'.
+ * @param iconColor - Color of the icons. Default is 'currentColor'.
+ */
 export declare interface BaseInputProps extends Omit<BaseFormFieldProps, 'type'>, WithIconsProps {
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     flushed?: boolean;
@@ -727,8 +766,19 @@ export declare interface FormFieldProps extends BaseFormFieldProps, Omit<WithIco
     className?: string;
 }
 
+/**
+ * Available sizes for form field components.
+ * - xs: Extra small size (30px height, 14px font).
+ * - sm: Small size (36px height, 14px font).
+ * - md: Medium size (42px height, 16px font) - Default for most inputs.
+ * - lg: Large size (48px height, 18px font).
+ */
 export declare type FormFieldSize = 'xs' | 'sm' | 'md' | 'lg';
 
+/**
+ * Interactive states for form fields.
+ * Used to describe the current visual and interactive state of a form element.
+ */
 export declare type FormFieldState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
 
 /**
@@ -1075,6 +1125,9 @@ export declare const isAllowedInputType: (t: string) => t is AllowedInputType;
 
 export declare const Label: ({ children, htmlFor, className, required, disabled, size, ...props }: BaseLabelProps) => JSX.Element;
 
+/**
+ * Available sizes for label components.
+ */
 export declare type LabelSize = 'xs' | 'sm' | 'md' | 'lg';
 
 /**
@@ -2067,9 +2120,29 @@ color?: string;
 }>> & string;
 export { Text_2 as Text }
 
+/**
+ * TextAreaInput provides a flexible multi-line text input component.
+ * Supports manual and automatic resizing, icons, and multiple size variants.
+ * Use for comments, descriptions, messages, or any long-form text input.
+ */
 export declare const TextAreaInput: ForwardRefExoticComponent<TextAreaInputProps & RefAttributes<HTMLTextAreaElement>>;
 
-export declare interface TextAreaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+/**
+ * Props for the TextAreaInput component.
+ * A flexible multi-line text input with support for icons, auto-resize, and various sizing options.
+ * @param size - The size variant of the textarea. Default is 'md'.
+ * @param hasError - When true, displays the textarea in an error state with error styling.
+ * @param disabled - When true, disables the textarea and prevents user interaction.
+ * @param minRows - Minimum number of visible rows. Affects the initial height of the textarea. Default is 3.
+ * @param maxRows - Maximum number of rows when autoResize is enabled. Limits the height expansion.
+ * @param resize - Controls the manual resize behavior of the textarea. Default is 'vertical'.
+ * @param autoResize - When true, automatically adjusts height based on content within minRows/maxRows constraints.
+ * @param leftIcon - Optional icon component displayed on the left side of the textarea.
+ * @param rightIcon - Optional icon component displayed on the right side of the textarea.
+ * @param iconSize - Size of the left and right icons. Default is 'md'.
+ * @param iconColor - Color of the icons. Default is 'currentColor'.
+ */
+export declare interface TextAreaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, WithIconsProps {
     size?: FormFieldSize;
     hasError?: boolean;
     disabled?: boolean;
@@ -2180,13 +2253,13 @@ export declare interface UserAbilities {
 }
 
 /**
- * User menu item configuration
- * Defines a single item in the user profile dropdown menu.
- * @param id Unique identifier for the menu item
- * @param label Display text for the menu item
- * @param icon Icon component to display next to the label
- * @param onClick Function to call when the item is clicked
- * @param variant Optional styling variant ('default' or 'danger')
+ * Menu item configuration for the user profile dropdown.
+ * Defines individual actions displayed in the dropdown menu.
+ * @param id - Unique identifier for the menu item.
+ * @param label - Display text shown in the menu.
+ * @param icon - Icon component or ReactNode displayed next to the label.
+ * @param onClick - Callback invoked when the menu item is clicked.
+ * @param variant - Visual style variant. 'danger' applies warning colors (e.g., for logout/delete). Default is 'default'.
  */
 export declare interface UserMenuItem {
     id: string;
@@ -2207,10 +2280,10 @@ export declare const UserProfile: {
 
 /**
  * Props for the UserProfile component.
- * @param user The user object containing name and role information
- * @param onProfileClick Optional function to call when profile is clicked
- * @param onLogout Optional function to call when logout is selected
- * @param menuItems Optional array of custom menu items to display
+ * @param user - User object containing id, name, email, and roles array. The first role's name is displayed.
+ * @param onProfileClick - Optional callback invoked when the Profile menu item is selected.
+ * @param onLogout - Optional callback invoked when the Logout menu item is selected.
+ * @param menuItems - Optional array of custom menu items to display alongside the default Profile and Logout items.
  */
 export declare interface UserProfileProps {
     user: User;