aha-components 1.7.12 → 1.8.1

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,42 @@
+import React, { type FC } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export 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;
+}
+export 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>;
+export declare const AvatarLabelGroup: React.FC<AvatarLabelGroupProps>;
+export default Avatar;

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './index';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+export declare const AllColors: StoryObj;
+export declare const AllSizes: StoryObj;
+export declare const WithDot: StoryObj;
+export declare const WithIcon: StoryObj;
+export declare const WithButton: StoryObj;
+export declare const PillIconOnly: StoryObj;
+export declare const BadgeColorIconOnly: StoryObj;
+export declare const ModernIconOnly: StoryObj;
+export declare const WithAvatar: StoryObj;
+export declare const ModernWithButton: StoryObj;
+export declare const Modern: StoryObj;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
+export type BadgeColor = 'gray' | 'brand' | 'error' | 'warning' | 'success' | 'grayBlue' | 'blueLight' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange';
+export type BadgeVariant = 'pill' | 'badge' | 'modern';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeIconComponent = React.FC<{
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+export interface BadgeProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export interface BadgeWithDotProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const BadgeWithDot: React.FC<BadgeWithDotProps>;
+export interface BadgeWithIconProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    iconLeading?: BadgeIconComponent;
+    iconTrailing?: BadgeIconComponent;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const BadgeWithIcon: React.FC<BadgeWithIconProps>;
+export interface BadgeWithButtonProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    icon?: BadgeIconComponent;
+    children: ReactNode;
+    buttonLabel?: string;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const BadgeWithButton: React.FC<BadgeWithButtonProps>;
+export interface BadgeIconProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    icon: BadgeIconComponent;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const BadgeIcon: React.FC<BadgeIconProps>;
+export interface BadgeWithImageProps {
+    variant?: Exclude<BadgeVariant, 'modern'>;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    imgSrc: string;
+    imgAlt?: string;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const BadgeWithImage: React.FC<BadgeWithImageProps>;
+export default Badge;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -3,10 +3,11 @@ import Checkbox from './index';
 declare const meta: Meta<typeof Checkbox>;
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
-export declare const Basic: Story;
+export declare const Default: Story;
 export declare const WithLabel: Story;
-export declare const Checked: Story;
-export declare const Indeterminate: Story;
-export declare const Disabled: Story;
+export declare const WithHint: Story;
+export declare const Sizes: Story;
 export declare const AllStates: Story;
+export declare const Focused: Story;
+export declare const WithHintAllStates: Story;
 export declare const Controlled: Story;

package/dist/components/Checkbox/index.d.ts

@@ -7,6 +7,12 @@ export 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>;
 export default Checkbox;

package/dist/components/Radio/Radio.stories.d.ts

@@ -3,8 +3,10 @@ import Radio from './index';
 declare const meta: Meta<typeof Radio>;
 export default meta;
 type Story = StoryObj<typeof Radio>;
-export declare const Basic: Story;
-export declare const Checked: Story;
-export declare const Disabled: Story;
-export declare const RadioGroup: Story;
+export declare const Default: Story;
+export declare const WithHint: Story;
 export declare const Sizes: Story;
+export declare const AllStates: Story;
+export declare const Focused: Story;
+export declare const RadioGroup: Story;
+export declare const RadioGroupWithHint: Story;

package/dist/components/Radio/index.d.ts

@@ -8,6 +8,12 @@ export 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>;
 export default Radio;

package/dist/components/Tag/Tag.stories.d.ts

@@ -4,11 +4,8 @@ declare const meta: Meta<typeof Tag>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const AllColors: Story;
-export declare const Variants: Story;
-export declare const WithStroke: Story;
-export declare const Sizes: Story;
-export declare const WithIcons: Story;
-export declare const Clickable: Story;
-export declare const CustomColors: Story;
-export declare const ComplexExample: Story;
+export declare const Overview: Story;
+export declare const Size: Story;
+export declare const Icons: Story;
+export declare const Actions: Story;
+export declare const Checkbox: Story;

package/dist/components/Tag/index.d.ts

@@ -1,19 +1,41 @@
 import React from 'react';
 export type TagColor = 'Green' | 'Red' | 'Orange' | 'Cyan' | 'Violet' | 'Pink' | 'Gray' | 'Yellow' | 'Blue' | string;
 export type TagVariant = 'light' | 'fill';
-export type TagSize = 'large' | 'small';
+/** sm/md/lg are the canonical sizes; large/small are legacy aliases */
+export type TagSize = 'sm' | 'md' | 'lg' | 'large' | 'small';
+/** Leading icon variant */
+export type TagIconType = 'none' | 'dot' | 'avatar' | 'icon';
+/** Right-side action */
+export type TagAction = 'none' | 'x-close' | 'count';
+/** @deprecated Use iconType instead */
 export type IconPosition = 'leading' | 'after' | 'none';
 export 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;
     [key: string]: any;
 }
+export interface TagAvatarProps {
+    src?: string;
+    alt?: string;
+    size?: number;
+}
+export declare const TagAvatar: React.FC<TagAvatarProps>;
 declare const Tag: React.FC<TagProps>;
 export default Tag;

package/dist/design-tokens/theme.css

@@ -85,6 +85,20 @@
   --color-gray-900: #1c1917;
   --color-gray-950: #171412;
 
+  /* gray-blue */
+  --color-gray-blue-25: #fcfcfd;
+  --color-gray-blue-50: #f8f9fc;
+  --color-gray-blue-100: #eaecf5;
+  --color-gray-blue-200: #d5d9eb;
+  --color-gray-blue-300: #b3b8db;
+  --color-gray-blue-400: #717bbc;
+  --color-gray-blue-500: #4e5ba6;
+  --color-gray-blue-600: #3e4784;
+  --color-gray-blue-700: #363f72;
+  --color-gray-blue-800: #293056;
+  --color-gray-blue-900: #101323;
+  --color-gray-blue-950: #0d0f1c;
+
   /* moss */
   --color-moss-25: #fafdf7;
   --color-moss-50: #f5fbee;
@@ -580,6 +594,18 @@
   --color-gray-800: var(--color-gray-800);
   --color-gray-900: var(--color-gray-900);
   --color-gray-950: var(--color-gray-950);
+  --color-gray-blue-25: var(--color-gray-blue-25);
+  --color-gray-blue-50: var(--color-gray-blue-50);
+  --color-gray-blue-100: var(--color-gray-blue-100);
+  --color-gray-blue-200: var(--color-gray-blue-200);
+  --color-gray-blue-300: var(--color-gray-blue-300);
+  --color-gray-blue-400: var(--color-gray-blue-400);
+  --color-gray-blue-500: var(--color-gray-blue-500);
+  --color-gray-blue-600: var(--color-gray-blue-600);
+  --color-gray-blue-700: var(--color-gray-blue-700);
+  --color-gray-blue-800: var(--color-gray-blue-800);
+  --color-gray-blue-900: var(--color-gray-blue-900);
+  --color-gray-blue-950: var(--color-gray-blue-950);
   --color-moss-25: var(--color-moss-25);
   --color-moss-50: var(--color-moss-50);
   --color-moss-100: var(--color-moss-100);

package/dist/design-tokens/theme.tailwind4.css

@@ -85,6 +85,20 @@
   --color-gray-900: #1c1917;
   --color-gray-950: #171412;
 
+  /* gray-blue */
+  --color-gray-blue-25: #fcfcfd;
+  --color-gray-blue-50: #f8f9fc;
+  --color-gray-blue-100: #eaecf5;
+  --color-gray-blue-200: #d5d9eb;
+  --color-gray-blue-300: #b3b8db;
+  --color-gray-blue-400: #717bbc;
+  --color-gray-blue-500: #4e5ba6;
+  --color-gray-blue-600: #3e4784;
+  --color-gray-blue-700: #363f72;
+  --color-gray-blue-800: #293056;
+  --color-gray-blue-900: #101323;
+  --color-gray-blue-950: #0d0f1c;
+
   /* moss */
   --color-moss-25: #fafdf7;
   --color-moss-50: #f5fbee;
@@ -580,6 +594,18 @@
   --color-gray-800: var(--color-gray-800);
   --color-gray-900: var(--color-gray-900);
   --color-gray-950: var(--color-gray-950);
+  --color-gray-blue-25: var(--color-gray-blue-25);
+  --color-gray-blue-50: var(--color-gray-blue-50);
+  --color-gray-blue-100: var(--color-gray-blue-100);
+  --color-gray-blue-200: var(--color-gray-blue-200);
+  --color-gray-blue-300: var(--color-gray-blue-300);
+  --color-gray-blue-400: var(--color-gray-blue-400);
+  --color-gray-blue-500: var(--color-gray-blue-500);
+  --color-gray-blue-600: var(--color-gray-blue-600);
+  --color-gray-blue-700: var(--color-gray-blue-700);
+  --color-gray-blue-800: var(--color-gray-blue-800);
+  --color-gray-blue-900: var(--color-gray-blue-900);
+  --color-gray-blue-950: var(--color-gray-blue-950);
   --color-moss-25: var(--color-moss-25);
   --color-moss-50: var(--color-moss-50);
   --color-moss-100: var(--color-moss-100);