@finlex/ai-tools

A comprehensive UI component library designed specifically for AI-powered applications. This package provides a set of React components that are optimized for AI integration, accessibility, and modern web applications.

Installation

npm install @finlex/ai-tools

Documentation

For detailed documentation and examples, visit our GitHub repository.

Components

Button Components

A comprehensive set of button components designed for AI-powered applications. The buttons are built with accessibility, customization, and AI integration in mind.

Features

• Multiple variants (primary, secondary, ghost, link)
• Various sizes (sm, md, lg)
• Icon support
• Loading states
• Dropdown and split button variants
• Button groups
• Full accessibility support
• AI-friendly documentation and integration patterns

Usage

import { Button } from '@finlex/ai-tools';

// Basic usage
<Button>Click me</Button>

// With variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// With sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With icons
<Button>
  <Icon className="mr-2" />
  With Icon
</Button>

// Loading state
<Button loading>Loading</Button>

// Disabled state
<Button disabled>Disabled</Button>

// Dropdown button
<DropdownButton
  items={[
    { label: 'Item 1', onClick: () => {} },
    { label: 'Item 2', onClick: () => {} }
  ]}
>
  Dropdown
</DropdownButton>

// Split button
<SplitButton
  primaryAction={{ label: 'Save', onClick: () => {} }}
  secondaryAction={{ label: 'More', onClick: () => {} }}
/>

// Button group
<ButtonGroup>
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' | 'secondary' | 'ghost' | 'link' | 'primary' | The visual style of the button | | size | 'sm' | 'md' | 'lg' | 'md' | The size of the button | | loading | boolean | false | Whether the button is in a loading state | | disabled | boolean | false | Whether the button is disabled | | className | string | undefined | Additional CSS classes | | onClick | () => void | undefined | Click handler | | children | ReactNode | undefined | Button content |

AI Integration

The button components are designed to be easily integrated with AI tools. They follow consistent patterns and provide clear prop interfaces that AI tools can understand and use effectively.

AI Usage Patterns

1. Component Selection

   • Use primary buttons for main actions
   • Use secondary buttons for alternative actions
   • Use ghost buttons for less prominent actions
   • Use link buttons for navigation-like actions

2. State Management

   • Use loading state for async operations
   • Use disabled state for unavailable actions
   • Handle click events appropriately

3. Accessibility

   • Always provide meaningful labels
   • Use ARIA attributes when needed
   • Ensure keyboard navigation works

4. Styling

   • Use consistent sizing
   • Apply appropriate variants
   • Add icons when they improve clarity

Accessibility

All buttons are built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation support
• Focus management
• Screen reader compatibility

Best Practices

1. Button Placement

   • Place primary actions on the right
   • Group related buttons together
   • Use consistent spacing

2. Button Text

   • Use clear, action-oriented text
   • Keep text concise
   • Use sentence case

3. Button States

   • Show loading state for async operations
   • Disable buttons when actions are unavailable
   • Provide visual feedback for interactions

4. Button Groups

   • Use for related actions
   • Maintain consistent styling
   • Ensure proper spacing

Theme Customization

Buttons can be customized through the theme configuration:

// Example theme configuration
const theme = {
  button: {
    variants: {
      primary: {
        background: 'blue',
        color: 'white',
        hover: 'darkBlue'
      },
      secondary: {
        background: 'gray',
        color: 'black',
        hover: 'darkGray'
      }
    },
    sizes: {
      sm: {
        padding: '0.5rem',
        fontSize: '0.875rem'
      },
      md: {
        padding: '0.75rem',
        fontSize: '1rem'
      },
      lg: {
        padding: '1rem',
        fontSize: '1.125rem'
      }
    }
  }
};

Animation

Buttons include smooth animations for various states:

// Example animation configuration
const animations = {
  button: {
    hover: {
      duration: '0.2s',
      easing: 'ease-in-out'
    },
    click: {
      duration: '0.1s',
      easing: 'ease-out'
    },
    loading: {
      duration: '1s',
      easing: 'linear'
    }
  }
};

License

This project is licensed under the MIT License - see the LICENSE file for details.