🔧 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
2. 💻 Installation
3. 🛠️ Usage
4. 📁 Package Structure
5. 📤 Exports
6. 🎯 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

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

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

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

Importing Utilities

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:

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

Utility Exports

Access utilities using the pattern:

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