tcce-design-system 0.3.21 → 0.3.23

package/dist/tcce-design-system-components.css

@@ -1 +1 @@
-:root{--color-main-blue-primary: #22205f;--color-main-orange-primary: #f66a24;--color-main-grey: #605f60;--color-main-alternative: #bf5f60;--color-main-alternative-secondary: #f2f2f2;--color-main-positive-state: #01d42f;--color-main-warning-state: #ea3a3d;--color-main-yellow-primary: #faca4a;--color-main-white: #ffffff;--color-main-black: #000000;--color-main-light-borders: #f1f5f7;--color-main-input-borders: rgba(96, 95, 96, .7);--color-dark-100: #e8e8e8;--color-dark-200: #d1d1d1;--color-dark-300: #a2a3a3;--color-dark-400: #747476;--color-dark-500: #454648;--color-dark-600: #17181a;--color-dark-700: #121315;--color-dark-800: #0e0e10;--color-dark-900: #090a0a;--color-light-100: #ffffff;--color-light-200: #f1f5f7;--color-light-300: #d9e1e7;--color-light-400: #b3c5d4;--color-light-500: #99b2c6;--color-light-600: #809fb8;--color-light-700: #667f93;--color-light-800: #4d5f6e;--color-light-900: #33404a;--color-light-1000: #1a2025;--color-blue-100: #c0b6fe;--color-blue-200: #816dfd;--color-blue-300: #4324fc;--color-blue-400: #2003d3;--color-blue-500: #15028a;--color-blue-600: #0a0141;--color-blue-700: #09013a;--color-blue-800: #080134;--color-blue-900: #07012d;--color-blue-1000: #060127;--color-red-100: #f8bdbe;--color-red-200: #f59c9e;--color-red-300: #f17c7e;--color-red-400: #ed5b5d;--color-red-500: #ea3a3d;--color-red-600: #bc1417;--color-red-700: #bc1417;--color-red-800: #971012;--color-red-900: #710c0e;--color-red-1000: #4b0809;--color-orange-100: #fee6db;--color-orange-200: #fccdb6;--color-orange-300: #fab592;--color-orange-400: #f99c6d;--color-orange-500: #f88349;--color-orange-700: #d94e09;--color-orange-800: #a33b07;--color-orange-900: #6c2704;--color-orange-1000: #361402;--color-yellow-100: #fffaed;--color-yellow-200: #fef4db;--color-yellow-300: #fdeab7;--color-yellow-400: #fcdf92;--color-yellow-500: #fbd56e;--color-yellow-600: #faca4a;--color-yellow-700: #c8a23b;--color-yellow-800: #96792c;--color-yellow-900: #64511e;--color-yellow-1000: #32280f;--color-green-100: #ceffd8;--color-green-200: #9cffb2;--color-green-300: #6bfe8b;--color-green-400: #3afe65;--color-green-500: #09fe3e;--color-green-600: #01d42f;--color-green-700: #01aa26;--color-green-800: #017f1c;--color-green-900: #005513;--color-green-1000: #002a09;--color-purple-100: #e0ddf1;--color-purple-200: #c0bae4;--color-purple-300: #a198d6;--color-purple-400: #8276c9;--color-purple-500: #6353bb;--color-purple-600: #4d3fa0;--color-purple-700: #3d327d;--color-purple-800: #2c245b;--color-purple-900: #231d49;--color-purple-1000: #1a1637;--border-radius-button: 1.875rem;--border-radius-secondary-button: .625rem;--border-radius-card: 1.25rem;--border-radius-article: .875rem;--border-radius-outline: .5rem;--shadow-black-card: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-card: 0 1.875rem 3.75rem 0 rgba(0, 0, 0, .35);--shadow-black-button: 0 .625rem 1.25rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-button: 0 .9375rem 1.875rem 0 rgba(0, 0, 0, .25);--shadow-hover-orange-button: 0 .9375rem 1.875rem 0 #fab592;--border-input: 1px solid rgba(96, 95, 96, .7);--border-input-disabled: 1px solid #d1d1d1;--border-input-error: 1px solid #ea3a3d;--border-input-focus: 1px solid #22205f}@font-face{font-family:Dax;src:url(./assets/fonts/dax-regular/dax-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dax;src:url(./assets/fonts/Dax-Bold/Dax-Bold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLight.otf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLightItalic.otf) format("truetype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThin.otf) format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThinItalic.otf) format("truetype");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLight.otf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLightItalic.otf) format("truetype");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueRoman.otf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueItalic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMedium.otf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMediumItalic.otf) format("truetype");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBoldItalic.otf) format("truetype");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavy.otf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavyItalic.otf) format("truetype");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlack.otf) format("truetype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlackItalic.otf) format("truetype");font-weight:900;font-style:italic;font-display:swap}*{scrollbar-width:thin;scrollbar-color:var(--color-main-orange-primary) #f1f1f1}*::-webkit-scrollbar{width:.5rem}*::-webkit-scrollbar-track{background:#f1f1f1;border-radius:.625rem}*::-webkit-scrollbar-thumb{background:var(--color-main-orange-primary);border-radius:.625rem}*::-webkit-scrollbar-thumb:hover{background:var(--color-main-orange-primary)}.my-toast{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:176.782%;border:none!important;box-shadow:var(--shadow-black-card);border-radius:var(--border-radius-article)!important}[data-sonner-toast][data-type=success]{background:linear-gradient(135deg,var(--color-main-positive-state) 0%,var(--color-green-200) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toast][data-type=error]{background:linear-gradient(135deg,var(--color-main-warning-state) 0%,var(--color-red-300) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toaster]{bottom:6rem!important}[data-sonner-toaster][data-position=bottom-center]{transform:translateY(-3rem)!important}
+:root{--color-main-blue-primary: #22205f;--color-main-orange-primary: #f66a24;--color-main-grey: #605f60;--color-main-alternative: #bf5f60;--color-main-alternative-secondary: #f2f2f2;--color-main-positive-state: #01d42f;--color-main-warning-state: #ea3a3d;--color-main-yellow-primary: #faca4a;--color-main-white: #ffffff;--color-main-black: #000000;--color-main-light-borders: #f1f5f7;--color-main-input-borders: rgba(96, 95, 96, .7);--color-main-light-background: #f1f5f7;--color-dark-100: #e8e8e8;--color-dark-200: #d1d1d1;--color-dark-300: #a2a3a3;--color-dark-400: #747476;--color-dark-500: #454648;--color-dark-600: #17181a;--color-dark-700: #121315;--color-dark-800: #0e0e10;--color-dark-900: #090a0a;--color-light-100: #ffffff;--color-light-200: #f1f5f7;--color-light-300: #d9e1e7;--color-light-400: #b3c5d4;--color-light-500: #99b2c6;--color-light-600: #809fb8;--color-light-700: #667f93;--color-light-800: #4d5f6e;--color-light-900: #33404a;--color-light-1000: #1a2025;--color-blue-100: #c0b6fe;--color-blue-200: #816dfd;--color-blue-300: #4324fc;--color-blue-400: #2003d3;--color-blue-500: #15028a;--color-blue-600: #0a0141;--color-blue-700: #09013a;--color-blue-800: #080134;--color-blue-900: #07012d;--color-blue-1000: #060127;--color-red-100: #f8bdbe;--color-red-200: #f59c9e;--color-red-300: #f17c7e;--color-red-400: #ed5b5d;--color-red-500: #ea3a3d;--color-red-600: #bc1417;--color-red-700: #bc1417;--color-red-800: #971012;--color-red-900: #710c0e;--color-red-1000: #4b0809;--color-orange-100: #fee6db;--color-orange-200: #fccdb6;--color-orange-300: #fab592;--color-orange-400: #f99c6d;--color-orange-500: #f88349;--color-orange-700: #d94e09;--color-orange-800: #a33b07;--color-orange-900: #6c2704;--color-orange-1000: #361402;--color-yellow-100: #fffaed;--color-yellow-200: #fef4db;--color-yellow-300: #fdeab7;--color-yellow-400: #fcdf92;--color-yellow-500: #fbd56e;--color-yellow-600: #faca4a;--color-yellow-700: #c8a23b;--color-yellow-800: #96792c;--color-yellow-900: #64511e;--color-yellow-1000: #32280f;--color-green-100: #ceffd8;--color-green-200: #9cffb2;--color-green-300: #6bfe8b;--color-green-400: #3afe65;--color-green-500: #09fe3e;--color-green-600: #01d42f;--color-green-700: #01aa26;--color-green-800: #017f1c;--color-green-900: #005513;--color-green-1000: #002a09;--color-purple-100: #e0ddf1;--color-purple-200: #c0bae4;--color-purple-300: #a198d6;--color-purple-400: #8276c9;--color-purple-500: #6353bb;--color-purple-600: #4d3fa0;--color-purple-700: #3d327d;--color-purple-800: #2c245b;--color-purple-900: #231d49;--color-purple-1000: #1a1637;--border-radius-button: 1.875rem;--border-radius-secondary-button: .625rem;--border-radius-card: 1.25rem;--border-radius-article: .875rem;--border-radius-outline: .5rem;--shadow-black-card: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-card: 0 1.875rem 3.75rem 0 rgba(0, 0, 0, .35);--shadow-black-button: 0 .625rem 1.25rem 0 rgba(0, 0, 0, .15);--shadow-hover-black-button: 0 .9375rem 1.875rem 0 rgba(0, 0, 0, .25);--shadow-hover-orange-button: 0 .9375rem 1.875rem 0 #fab592;--border-input: 1px solid rgba(96, 95, 96, .7);--border-input-disabled: 1px solid #d1d1d1;--border-input-error: 1px solid #ea3a3d;--border-input-focus: 1px solid #22205f}@font-face{font-family:Dax;src:url(./assets/fonts/dax-regular/dax-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dax;src:url(./assets/fonts/Dax-Bold/Dax-Bold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLight.otf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueUltraLightItalic.otf) format("truetype");font-weight:200;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThin.otf) format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueThinItalic.otf) format("truetype");font-weight:100;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLight.otf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueLightItalic.otf) format("truetype");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueRoman.otf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueItalic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMedium.otf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueMediumItalic.otf) format("truetype");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBold.otf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBoldItalic.otf) format("truetype");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavy.otf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueHeavyItalic.otf) format("truetype");font-weight:800;font-style:italic;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlack.otf) format("truetype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Helvetica Neue;src:url(./assets/fonts/Helvetica-Neue/HelveticaNeueBlackItalic.otf) format("truetype");font-weight:900;font-style:italic;font-display:swap}*{scrollbar-width:thin;scrollbar-color:var(--color-main-orange-primary) #f1f1f1}*::-webkit-scrollbar{width:.5rem}*::-webkit-scrollbar-track{background:#f1f1f1;border-radius:.625rem}*::-webkit-scrollbar-thumb{background:var(--color-main-orange-primary);border-radius:.625rem}*::-webkit-scrollbar-thumb:hover{background:var(--color-main-orange-primary)}.my-toast{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1rem;font-style:normal;font-weight:400;line-height:176.782%;border:none!important;box-shadow:var(--shadow-black-card);border-radius:var(--border-radius-article)!important}[data-sonner-toast][data-type=success]{background:linear-gradient(135deg,var(--color-main-positive-state) 0%,var(--color-green-200) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toast][data-type=error]{background:linear-gradient(135deg,var(--color-main-warning-state) 0%,var(--color-red-300) 100%)!important;color:var(--color-main-white)!important}[data-sonner-toaster]{bottom:6rem!important}[data-sonner-toaster][data-position=bottom-center]{transform:translateY(-3rem)!important}

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';
 
 /**
@@ -929,7 +979,7 @@ export declare const hasPermission: (userPermissions?: Permission[], requiredPer
  * @returns JSX.Element The rendered header.
  */
 export declare const Header: {
-    ({ logo, user, hasNotifications, notificationCount, onNotificationClick, onUserProfileClick, onLogout, userMenuItems, }: HeaderProps): JSX.Element;
+    ({ logo, user, hasNotifications, notificationCount, onNotificationClick, onUserProfileClick, onLogout, userMenuItems, className, }: HeaderProps): JSX.Element;
     displayName: string;
 };
 
@@ -954,6 +1004,7 @@ export declare interface HeaderProps {
     onUserProfileClick?: () => void;
     onLogout?: () => void;
     userMenuItems?: UserMenuItem[];
+    className?: string;
 }
 
 export declare const HeadingBold: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
@@ -1074,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';
 
 /**
@@ -1165,13 +1219,16 @@ export declare interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElemen
 
 /**
  * Defines the available sizes for the Link component.
+ * Can be a preset size that maps to bodyTextStyles: xs(12), sm(14), md(16), lg(20), xl(24), 2xl(30)
+ * Or a custom CSS size value (e.g., '1.5em', '18px', '1.2rem')
  */
-export declare type LinkSize = 'sm' | 'md' | 'lg';
+export declare type LinkSize = 'xs' | 'sm' | 'md' | 'lg' | (number & {});
 
 /**
  * CSS styles for each Link size.
  */
 export declare const LinkSizeStyles: {
+    xs: RuleSet<object>;
     sm: RuleSet<object>;
     md: RuleSet<object>;
     lg: RuleSet<object>;
@@ -2063,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;
@@ -2176,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;
@@ -2203,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;