npm package: @polarityio/pi-components
Description: Meta-package that re-exports all Polarity integration components
Latest version: 1.0.6

# Polarity Integration Component Library

## All Components

Meta-package that re-exports every component in the Polarity Integration Component Library. Install this single package to get access to all components, utilities, and types.

## Installation

```bash
npm install @polarityio/pi-components
```

### Peer Dependencies

- [lit](https://lit.dev/) ^3.0.0

## Usage

```javascript
import {
  defineCustomElementOnce,
  PiButton, PiButtonName,
  PiIcon, PiIconName,
  PiSelect, PiSelectName
} from '@polarityio/pi-components';

// Register only the components you need
defineCustomElementOnce(PiButtonName, PiButton);
defineCustomElementOnce(PiIconName, PiIcon);
defineCustomElementOnce(PiSelectName, PiSelect);
```

```javascript
import { html } from 'lit';
import { faUser } from '@fortawesome/free-solid-svg-icons';

html`
  <pi-button type="primary" label="Click me"></pi-button>
  <pi-icon .icon=${faUser} size="lg"></pi-icon>
`;
```

> **Tree-shaking:** Only the components you import are included in your bundle. Unused components are automatically excluded.

## Included Components

| Package | Component(s) | Description |
| --- | --- | --- |
| [@polarityio/pi-shared](../shared/) | — | Shared utilities, base classes, interfaces, and design tokens |
| [@polarityio/pi-button](../button/) | `<pi-button>` | Button with multiple types, variants, and icon support |
| [@polarityio/pi-card](../card/) | `<pi-card>` | Card container with optional collapsible title |
| [@polarityio/pi-checkbox](../checkbox/) | `<pi-checkbox>` | Checkbox with checked, indeterminate, and disabled states |
| [@polarityio/pi-copy-button](../copy-button/) | `<pi-copy-button>` | Clipboard copy button with rich text support |
| [@polarityio/pi-external-link](../external-link/) | `<pi-external-link>` | Link that opens URLs in a new tab with icon and tooltip |
| [@polarityio/pi-icon](../icon/) | `<pi-icon>` | FontAwesome SVG icon rendering |
| [@polarityio/pi-input](../input/) | `<pi-input>` | Text input with validation, clearable field, and error states |
| [@polarityio/pi-key-value](../key-value/) | `<pi-key-value>` | Key-value pair display with date formatting |
| [@polarityio/pi-object-table](../object-table/) | `<pi-object-table>` | Object/array to HTML table renderer |
| [@polarityio/pi-radio](../radio/) | `<pi-radio>`, `<pi-radio-group>` | Radio button and radio group components |
| [@polarityio/pi-section-header](../section-header/) | `<pi-section-header>` | Collapsible section header with count display |
| [@polarityio/pi-select](../select/) | `<pi-select>` | Searchable dropdown with single/multiple selection |
| [@polarityio/pi-show-more](../show-more/) | `<pi-show-more>` | Expandable content with show more/less toggle |
| [@polarityio/pi-spinner](../spinner/) | `<pi-spinner>` | Loading spinner with configurable size and label |
| [@polarityio/pi-summary-tag](../summary-tag/) | `<pi-summary-tag>` | Integration-themed badge with colored acronym |
| [@polarityio/pi-tab](../tab/) | `<pi-tab>`, `<pi-tab-group>`, `<pi-tab-panel>` | Tab navigation components |
| [@polarityio/pi-tag](../tag/) | `<pi-tag>` | Inline tag/chip with optional icons |
| [@polarityio/pi-tooltip](../tooltip/) | `<pi-tooltip>` | Tooltip with floating-ui positioning |

## Component Registry

This package also exports a component registry JSON file for runtime discovery:

```javascript
import registry from '@polarityio/pi-components/component-registry.json';
```

## When to Use This Package

- **Use `@polarityio/pi-components`** when you need multiple components and want a single import source. Tree-shaking ensures only what you use is bundled.
- **Use individual packages** (e.g., `@polarityio/pi-button`) when you want minimal dependencies or need fine-grained version control per component.

## Theming

All components use CSS custom properties from `@polarityio/pi-shared` for theming. See the [Shared Utilities README](../shared/) for details on design tokens and theme setup.

## License

MIT