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

$3

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
Click me
Secondary Action
Delete Disabled
`

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