aha-components 1.7.12 → 1.8.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode, MouseEventHandler, FC } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -87,15 +87,31 @@ declare const ToastProvider: React.FC<{
 
 type TagColor = 'Green' | 'Red' | 'Orange' | 'Cyan' | 'Violet' | 'Pink' | 'Gray' | 'Yellow' | 'Blue' | string;
 type TagVariant = 'light' | 'fill';
-type TagSize = 'large' | 'small';
+/** sm/md/lg are the canonical sizes; large/small are legacy aliases */
+type TagSize = 'sm' | 'md' | 'lg' | 'large' | 'small';
+/** Leading icon variant */
+type TagIconType = 'none' | 'dot' | 'avatar' | 'icon';
+/** Right-side action */
+type TagAction = 'none' | 'x-close' | 'count';
+/** @deprecated Use iconType instead */
 type IconPosition = 'leading' | 'after' | 'none';
 interface TagProps {
     children: React.ReactNode;
-    color: TagColor;
+    color?: TagColor;
     variant?: TagVariant;
     size?: TagSize;
     stroke?: boolean;
+    iconType?: TagIconType;
     icon?: React.ReactElement;
+    avatarSrc?: string;
+    dotColor?: string;
+    action?: TagAction;
+    count?: number;
+    onClose?: () => void;
+    checkbox?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** @deprecated use iconType='icon' */
     iconPosition?: IconPosition;
     className?: string;
     onClick?: () => void;
@@ -298,6 +314,12 @@ interface CheckboxProps {
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
+    /** sm = 16px, md = 20px */
+    size?: 'sm' | 'md';
+    /** Secondary description rendered below the label */
+    hint?: React.ReactNode;
+    /** Force focused appearance (useful for Storybook demos) */
+    isFocused?: boolean;
 }
 declare const Checkbox: React.FC<CheckboxProps>;
 
@@ -310,6 +332,12 @@ interface RadioProps {
     children?: React.ReactNode;
     value?: any;
     name?: string;
+    /** sm = 16px, md = 20px */
+    size?: 'sm' | 'md';
+    /** Secondary description rendered below the label */
+    hint?: React.ReactNode;
+    /** Force focused appearance (useful for Storybook demos) */
+    isFocused?: boolean;
 }
 declare const Radio: React.FC<RadioProps>;
 
@@ -370,46 +398,77 @@ interface ProgressProps {
 }
 declare const Progress: React.FC<ProgressProps>;
 
+interface InputGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'> {
+    size?: 'small' | 'mediumSmall' | 'medium' | 'large';
+    error?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    /** Text addon on the left (e.g. "https://") — auto-styled with correct padding */
+    leadingText?: React.ReactNode;
+    /** Text addon on the right (e.g. "USD") — auto-styled with correct padding */
+    trailingText?: React.ReactNode;
+    /** Raw ReactNode on the left (dropdown, icon button, etc.) — no padding added */
+    leadingAddon?: React.ReactNode;
+    /** Raw ReactNode on the right (button, select, etc.) — no padding added */
+    trailingAddon?: React.ReactNode;
+    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    label?: string;
+    required?: boolean;
+    hintText?: string;
+}
+declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLInputElement>>;
+
+interface InputTagsProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'small' | 'mediumSmall' | 'medium' | 'large';
+    className?: string;
+    style?: React.CSSProperties;
+    label?: string;
+    required?: boolean;
+    hintText?: string;
+}
+declare const InputTags: React.FC<InputTagsProps>;
+
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'> {
-    /** 输入框大小 */
     size?: 'small' | 'mediumSmall' | 'medium' | 'large';
-    /** 是否禁用 */
     disabled?: boolean;
-    /** 是否显示错误状态 */
     error?: boolean;
-    /** 是否只读 */
     readOnly?: boolean;
-    /** 输入框前缀图标 */
     prefix?: React.ReactNode;
-    /** 输入框后缀图标 */
     suffix?: React.ReactNode;
-    /** 允许清除 */
     allowClear?: boolean;
-    /** 清除回调 */
     onClear?: () => void;
-    /** 自定义类名 */
     className?: string;
-    /** 自定义样式 */
     style?: React.CSSProperties;
-    /** 输入框类型 */
     type?: string;
-    /** 占位符 */
     placeholder?: string;
-    /** 值 */
     value?: string;
-    /** 默认值 */
     defaultValue?: string;
-    /** 变化回调 */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /** 聚焦回调 */
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    /** 失焦回调 */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    /** 按下回车回调 */
     onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    label?: string;
+    required?: boolean;
+    hintText?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
+interface TextareaTagsProps extends Omit<InputTagsProps, 'size'> {
+    minHeight?: number;
+    helpIcon?: React.ReactNode;
+}
+declare const TextareaTags: React.FC<TextareaTagsProps>;
+
 interface LinkifyOptions {
     validate?: (url: string) => boolean;
     className?: string;
@@ -418,43 +477,30 @@ interface LinkifyOptions {
     allowedTlds?: string[];
 }
 interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
-    /** 是否禁用 */
     disabled?: boolean;
-    /** 是否显示错误状态 */
     error?: boolean;
-    /** 是否只读 */
     readOnly?: boolean;
-    /** 是否显示字符计数 */
     showCount?: boolean;
-    /** 最大字符数 */
     maxLength?: number;
-    /** 自定义类名 */
     className?: string;
-    /** 自定义样式 */
     style?: React.CSSProperties;
-    /** 占位符 */
     placeholder?: string;
-    /** 值 */
     value?: string;
-    /** 默认值 */
     defaultValue?: string;
-    /** 行数 */
     rows?: number;
-    /** 是否自动调整高度 */
     autoSize?: boolean | {
         minRows?: number;
         maxRows?: number;
     };
-    /** 变化回调 */
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /** 聚焦回调 */
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-    /** 失焦回调 */
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-    /** 是否启用实时链接识别 */
     linkify?: boolean;
-    /** 链接识别配置 */
     linkifyOptions?: LinkifyOptions;
+    label?: string;
+    required?: boolean;
+    hintText?: string;
+    helpIcon?: React.ReactNode;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
@@ -997,6 +1043,116 @@ interface LoadingProps {
 }
 declare const Loading: React.FC<LoadingProps>;
 
+type BadgeColor = 'gray' | 'brand' | 'error' | 'warning' | 'success' | 'grayBlue' | 'blueLight' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange';
+type BadgeVariant = 'pill' | 'badge' | 'modern';
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeIconComponent = React.FC<{
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+interface BadgeProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const Badge: React.FC<BadgeProps>;
+interface BadgeWithDotProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const BadgeWithDot: React.FC<BadgeWithDotProps>;
+interface BadgeWithIconProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    iconLeading?: BadgeIconComponent;
+    iconTrailing?: BadgeIconComponent;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const BadgeWithIcon: React.FC<BadgeWithIconProps>;
+interface BadgeWithButtonProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    icon?: BadgeIconComponent;
+    children: ReactNode;
+    buttonLabel?: string;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const BadgeWithButton: React.FC<BadgeWithButtonProps>;
+interface BadgeIconProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    icon: BadgeIconComponent;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const BadgeIcon: React.FC<BadgeIconProps>;
+interface BadgeWithImageProps {
+    variant?: Exclude<BadgeVariant, 'modern'>;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    imgSrc: string;
+    imgAlt?: string;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const BadgeWithImage: React.FC<BadgeWithImageProps>;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface AvatarProps {
+    size?: AvatarSize;
+    src?: string | null;
+    alt?: string;
+    /** Two-letter initials displayed when no image is provided */
+    initials?: string;
+    /** Custom icon component displayed as placeholder */
+    placeholderIcon?: FC<{
+        style?: React.CSSProperties;
+    }>;
+    /** Online/offline status indicator dot */
+    status?: 'online' | 'offline';
+    /** Company logo badge displayed bottom-right */
+    companyIcon?: {
+        src: string;
+        alt?: string;
+    };
+    /** Blue verified checkmark badge */
+    verified?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface AvatarLabelGroupProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    name: string;
+    supportingText?: string;
+    avatarSrc?: string | null;
+    avatarInitials?: string;
+    status?: 'online' | 'offline';
+    companyIcon?: {
+        src: string;
+        alt?: string;
+    };
+    verified?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const Avatar: React.FC<AvatarProps>;
+declare const AvatarLabelGroup: React.FC<AvatarLabelGroupProps>;
+
 interface ThemeConfig {
     primaryColor?: string;
 }
@@ -1016,4 +1172,4 @@ declare const MinusIcon: React.FC<{
     style?: React.CSSProperties;
 }>;
 
-export { Alert, AlertProps, Button, ButtonProps, CheckIcon, Checkbox, CheckboxProps, ColumnType, DatePicker, DatePickerProps, DateRange, Drawer, DrawerPlacement, DrawerProps, FormWithItem as Form, FormInstance, FormItemProps, FormProps, Input, InputProps, Loading, LoadingProps, MenuGroupType, MenuItemType, MenuList, MenuListProps, MinusIcon, Pagination, PaginationProps, Popover, PopoverPlacement, PopoverProps, PopoverTrigger, Progress, ProgressProps, ProgressStatus, ProgressType, Radio, RadioProps, Select, SelectOption, SelectProps, SortOrder, SorterResult, Switch, SwitchProps, Tab, TabItem, TabLayout, TabProps, TabVariant, Table, TableCurrentDataSource, TableLayout, TableProps, TableRowSelection, TableSize, Tag, TagProps, Textarea, TextareaProps, ThemeConfig, ThemeProvider, ThemeProviderProps, Toast, ToastPosition, ToastProps, ToastProvider, ToastType, Tooltip, TooltipPosition, TooltipProps, UserProfileType, clearAllToasts, closeToast, debugToast, toast, toastError, toastInfo, toastQuestion, toastSuccess, useTheme };
+export { Alert, AlertProps, Avatar, AvatarLabelGroup, AvatarLabelGroupProps, AvatarProps, AvatarSize, Badge, BadgeColor, BadgeIcon, BadgeIconComponent, BadgeIconProps, BadgeProps, BadgeSize, BadgeVariant, BadgeWithButton, BadgeWithButtonProps, BadgeWithDot, BadgeWithDotProps, BadgeWithIcon, BadgeWithIconProps, BadgeWithImage, BadgeWithImageProps, Button, ButtonProps, CheckIcon, Checkbox, CheckboxProps, ColumnType, DatePicker, DatePickerProps, DateRange, Drawer, DrawerPlacement, DrawerProps, FormWithItem as Form, FormInstance, FormItemProps, FormProps, Input, InputGroup, InputGroupProps, InputProps, InputTags, InputTagsProps, Loading, LoadingProps, MenuGroupType, MenuItemType, MenuList, MenuListProps, MinusIcon, Pagination, PaginationProps, Popover, PopoverPlacement, PopoverProps, PopoverTrigger, Progress, ProgressProps, ProgressStatus, ProgressType, Radio, RadioProps, Select, SelectOption, SelectProps, SortOrder, SorterResult, Switch, SwitchProps, Tab, TabItem, TabLayout, TabProps, TabVariant, Table, TableCurrentDataSource, TableLayout, TableProps, TableRowSelection, TableSize, Tag, TagProps, Textarea, TextareaProps, TextareaTags, TextareaTagsProps, ThemeConfig, ThemeProvider, ThemeProviderProps, Toast, ToastPosition, ToastProps, ToastProvider, ToastType, Tooltip, TooltipPosition, TooltipProps, UserProfileType, clearAllToasts, closeToast, debugToast, toast, toastError, toastInfo, toastQuestion, toastSuccess, useTheme };