# 🔧 Beam Shared

Shared utilities, component definitions, and constants for the Beam Design System. This package provides framework-agnostic code used across `@viasat/beam-react` and `@viasat/beam-web-components`.

## 🔖 Table of Contents

1. [📋 Overview](#overview)
2. [💻 Installation](#installation)
3. [🛠️ Usage](#usage)
4. [📁 Package Structure](#package-structure)
5. [📤 Exports](#exports)
6. [🎯 When to Use](#when-to-use)

## Overview

`@viasat/beam-shared` contains common code that is shared between React and Web Components implementations, including:

- **Component Definitions** - Shared interfaces, types, and constants for all Beam components
- **Utility Functions** - Helper functions for class names, DOM manipulation, and styling
- **Constants** - Design system constants (themes, sizes, appearances, etc.)
- **Type Definitions** - TypeScript types shared across packages

## Installation

```bash
npm install @viasat/beam-shared
```

> **Note**: This package is typically installed automatically as a dependency of `@viasat/beam-react` or `@viasat/beam-web-components`.

## Usage

### Importing Component Definitions

```ts
import {
  ButtonKind,
  ButtonAppearance,
  ButtonSize,
} from '@viasat/beam-shared/components/button';

import { AlertAppearance } from '@viasat/beam-shared/components/alert';
```

### Importing Utilities

```ts
import {
  getBEMClassNames,
  generateSpacingClasses,
} from '@viasat/beam-shared/utils/classNames';

import { ThemeTypes, ProductType } from '@viasat/beam-shared/utils/constants';
```

## Package Structure

```
@viasat/beam-shared/
├── components/          # Component-specific definitions
│   ├── button.ts
│   ├── alert.ts
│   ├── badge.ts
│   └── ...
└── utils/              # Shared utilities
    ├── classNames.ts
    ├── constants.ts
    ├── dom.ts
    ├── helpers.ts
    └── types.ts
```

## Exports

### Component Exports

Access component definitions using the pattern:

```ts
import { ... } from '@viasat/beam-shared/components/<component-name>';
```

### Utility Exports

Access utilities using the pattern:

```ts
import { ... } from '@viasat/beam-shared/utils/<utility-name>';
```

## When to Use

This package is intended for:

- ✅ Building custom Beam components
- ✅ Extending Beam functionality
- ✅ Integrating Beam with custom frameworks
- ✅ Sharing code between React and Web Components

This package is **not needed** if you're simply using `@viasat/beam-react` or `@viasat/beam-web-components` in your application.

## TypeScript

All exports are fully typed with TypeScript definitions included.

## License

MIT © Viasat