open-index/open-npm huggingface dataset:
npm package: @futuraico/aa-components
Description: AA Components - Professional Stencil Component Library
Latest version: 0.0.3

# AA Components

A professional component library built with Stencil and esbuild.

## Installation

```bash
pnpm install
```

## Build

To build the component library:

```bash
pnpm run build
```

## Development

To start a local dev server with live reload:

```bash
pnpm start
```

## Components

### aa-button

A versatile button component with multiple variants and states.

#### Props

- `variant`: `'primary' | 'secondary' | 'danger'` - Button style variant (default: 'primary')
- `disabled`: `boolean` - Disable the button (default: false)

#### Usage

```html
<aa-button>Click me</aa-button>
<aa-button variant="secondary">Secondary Action</aa-button>
<aa-button variant="danger" disabled>Delete Disabled</aa-button>
```

#### Features

- Shadow DOM encapsulation
- Professional styling with CSS custom properties
- Smooth transitions and hover effects
- Accessible focus states
- Responsive design

## Demo

Open `demo/index.html` in a browser to see all button variants and states.

## Project Structure

```
.
├── src/
│   ├── components/
│   │   └── aa-button/
│   │       ├── aa-button.tsx      # Component definition
│   │       ├── aa-button.scss     # Component styles
│   │       └── aa-button.spec.ts  # Component tests
│   ├── global/
│   │   ├── app.ts                 # Global app initialization
│   │   └── app.css                # Global styles
│   ├── index.ts                   # Entry point
│   └── components.d.ts            # Type definitions
├── demo/
│   ├── index.html                 # Demo page
│   └── styles.css                 # Demo styles
├── stencil.config.ts              # Stencil configuration (esbuild bundler)
├── tsconfig.json                  # TypeScript configuration
└── package.json                   # Project dependencies
```

## Technology Stack

- **Framework**: Stencil
- **Bundler**: esbuild
- **Language**: TypeScript
- **Styling**: Sass/SCSS
- **Package Manager**: pnpm