npm package: @prioticket/design-system-react
Description: React wrappers for the Prioticket Design System web components
Latest version: 1.7.0

# Prioticket Design System React

Official React bindings for the `@prioticket/design-system-web` component library. These wrappers are auto-generated from the Web Component manifest and expose each element as a typed React component via `@lit/react`.

## Installation

```bash
npm install @prioticket/design-system-react @prioticket/design-system-web
```

The React package depends on the core web component bundle. Most projects also import one of the distributed theme stylesheets:

```tsx
import '@prioticket/design-system-web/theme-with-fonts.css';
// or: import '@prioticket/design-system-web/theme-only.css';
```

## Quick Start

```tsx
import { useEffect } from 'react';
import { PdButton, PdDialog } from '@prioticket/design-system-react';
import { initialize } from '@prioticket/design-system-web/theming';
import '@prioticket/design-system-web/theme-with-fonts.css';

export function App() {
  useEffect(() => {
    initialize({
      theme: {
        colorPrimary: '#ff6600',
        colorOnPrimary: '#ffffff'
      }
    });
  }, []);

  return (
    <PdDialog onPrimaryAction={(event) => console.log(event.detail)}>
      <PdButton slot="primary-action">Continue</PdButton>
    </PdDialog>
  );
}
```

All wrappers render a custom element under the hood, so slots, attributes, and properties behave exactly like the base web component.

## Event Handling

Events emitted by the web components are exposed as camel-cased React props that start with `on`. For example, the `pd-dialog` events `primary-action` and `secondary-action` become `onPrimaryAction` and `onSecondaryAction`. Each handler receives the original `CustomEvent`, preserving its `detail` payload.

## Theming Utilities

The core package exposes helpers under `@prioticket/design-system-web/theming`. Use `initialize` to apply a theme at app start or `applyTheme` to update tokens later. The helpers are framework agnostic and can be called from any React effect or data loader.

```tsx
import { initialize } from '@prioticket/design-system-web/theming';

await initialize({ theme: { colorPrimary: '#4caf50' } });
```

## TypeScript Support

Every wrapper re-exports a `*Element` type that maps to the underlying custom element class. This is useful when grabbing refs:

```tsx
import { useRef } from 'react';
import { PdTextField, PdTextFieldElement } from '@prioticket/design-system-react';

const ref = useRef<PdTextFieldElement>(null);
```

## Component Reference

The React entry point (`@prioticket/design-system-react`) exports all Prioticket components. Refer to `COMPONENT-DOCUMENTATION.md` in the root of the design system repository for behavior, slots, and properties—they apply equally to the React wrappers.

## SSR & Hydration

The wrappers are thin `@lit/react` adapters and support server-side rendering. Renderers will output the corresponding custom element tags; hydration happens client-side once the browser upgrades the elements.

## Troubleshooting

- Ensure the core package is loaded exactly once (e.g. do not register components via multiple versions of the bundle).
- Import the CSS theme before rendering components to avoid flashes of unstyled content.
- If you tree-shake aggressively, keep the side-effect flag for `@prioticket/design-system-react` enabled so the custom elements are defined.