npm package: @finlex/ai-tools
Description: 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.
Latest version: 1.0.8

# @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

```bash
npm install @finlex/ai-tools
```

## Documentation

For detailed documentation and examples, visit our [GitHub repository](https://github.com/finlexlabs/finlex-ui-tools).

## 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

```tsx
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:

```tsx
// 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:

```tsx
// 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](LICENSE) file for details.