open-index/open-npm huggingface dataset:
npm package: @real-router/fsm
Description: Universal synchronous FSM engine for Real-Router
Author: Oleg Ivanov
Latest version: 0.4.0

# @real-router/fsm

> Synchronous finite state machine engine.

**Internal package** — consumed by `@real-router/core`. Published to npm by historical accident — do not depend on it directly.

## Purpose

Drives the router's lifecycle state machine (`IDLE → STARTING → READY → TRANSITION_STARTED → LEAVE_APPROVED → READY | DISPOSED`). Synchronous, zero-dependency, O(1) transition lookup.

## Consumer

- `@real-router/core` — router lifecycle management

## Public API

```typescript
import { FSM } from "@real-router/fsm";

const fsm = new FSM({
  initial: "green",
  context: { count: 0 },
  transitions: {
    green:  { TIMER: "yellow" },
    yellow: { TIMER: "red" },
    red:    { TIMER: "green", RESET: "green" },
  },
});

fsm.send("TIMER");      // "yellow"
fsm.send("TIMER");      // "red"
fsm.getState();          // "red"
fsm.getContext();         // { count: 0 }
```

| Method | Description |
|--------|-------------|
| `send(event, payload?)` | Trigger transition, return current state. No-op if no transition defined |
| `getState()` | Current state |
| `getContext()` | Context object (same reference as config) |
| `onTransition(listener)` | Subscribe to transitions, returns unsubscribe |
| `on(from, event, action)` | Register action for specific `(from, event)` pair |
| `forceState(state)` | Direct state update — no actions, no listeners |

### Type-Safe Payloads

```typescript
interface PayloadMap {
  FETCH: { url: string };
}

const fsm = new FSM<State, Event, null, PayloadMap>(config);
fsm.send("FETCH", { url: "/api" }); // required
fsm.send("RESOLVE");                 // no payload
fsm.send("FETCH");                   // TS error
```

## Key Design Decisions

- **Synchronous** — no async, no promises, no microtasks
- **`#currentTransitions` cache** — avoids double lookup `transitions[state][event]`
- **Zero-alloc hot path** — skips `TransitionInfo` allocation when no listeners
- **Null-slot listener array** — reuses slots from unsubscribed listeners
- **Reentrancy-safe** — state updated before listeners fire; callers responsible for preventing loops
- **`forceState()`** — bypasses `send()` overhead (~30ns saved per call) for router's navigate hot path

## Dependencies

None (zero dependencies).

## License

[MIT](../../LICENSE)
npm package: @real-system/a11y-library
Description: React aria library for real system.
Author: Mike Wolf
Latest version: 0.0.20

<h1 align="center">@real-system/a11y-library</h1>
<p align="center">React aria library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/a11y-library"><img src="https://badgen.net/npm/v/@real-system/a11y-library?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install react-aria

# npm
$ npm install @real-system/a11y-library
# yarn
$ yarn add @real-system/a11y-library
```

### Code Example

```typescript
import { useButton, useCheckbox, useCheckboxGroup, useCheckboxGroupItem } from '@real-system/a11y-library';

...

```
npm package: @real-system/accordion
Description: Accordion component for real system.
Author: Mike Wolf
Latest version: 0.0.23

<h1 align="center">@real-system/accordion</h1>
<p align="center">Accordion component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/accordion"><img src="https://badgen.net/npm/v/@real-system/accordion?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/a11y-library @real-system/styled-library @real-system/disclosure @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/a11y-library @real-system/styled-library @real-system/disclosure @real-system/utils-library

# install accordion

# npm
$ npm install @real-system/accordion
# yarn
$ yarn add @real-system/accordion
```

### Code Example

```tsx
import { Accordion } from '@real-system/accordion';
import { Disclosure, DisclosureToggle, DisclosureContent } from '@real-system/disclosure';

const MyComponent = () => {
  return (
    // available props
    <Accordion allowMultiple contained defaultExpanded={{ 1: true, 2: true, 3: true }}>
      <Disclosure>
        <DisclosureToggle>Accordion Item 1</DisclosureToggle>
        <DisclosureContent>Some content to expand and collapse</DisclosureContent>
      </Disclosure>
       <Disclosure>
        <DisclosureToggle>Accordion Item 2</DisclosureToggle>
        <DisclosureContent>Some content to expand and collapse</DisclosureContent>
      </Disclosure>
       <Disclosure>
        <DisclosureToggle>Accordion Item 3</DisclosureToggle>
        <DisclosureContent>Some content to expand and collapse</DisclosureContent>
      </Disclosure>
    </Accordion>
  )
}

```
npm package: @real-system/alert
Description: Alert component for real system.
Author: Mike Wolf
Latest version: 0.0.52

<h1 align="center">@real-system/alert</h1>
<p align="center">Alert component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/alert"><img src="https://badgen.net/npm/v/@real-system/alert?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/button @real-system/flex @real-system/icon @real-system/styled-library @real-system/typography
# yarn
$ yarn add react react-dom @real-system/button @real-system/flex @real-system/icon @real-system/styled-library @real-system/typography

# install alert

# npm
$ npm install @real-system/alert
# yarn
$ yarn add @real-system/alert
```

### Code Example

```typescript
import { Alert, InlineAlert } from '@real-system/alert';
import type { AlertProps, InlineAlertProps } from '@real-system/alert';

...

```
npm package: @real-system/alert-primitive
Description: Alert primitive component for real system.
Author: Mike Wolf
Latest version: 0.0.24

<h1 align="center">@real-system/alert-primitive</h1>
<p align="center">Alert primitive component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/alert-primitive"><img src="https://badgen.net/npm/v/@real-system/alert-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install alert-primitive

# npm
$ npm install @real-system/alert-primitive
# yarn
$ yarn add @real-system/alert-primitive
```

### Code Example

```typescript
import { AlertPrimitive } from '@real-system/alert-primitive';

const PoliteAlert = () => <AlertPrimitive>Alert primitive Content</AlertPrimitive>;
const AssertiveAlert = () => <AlertPrimitive type="assertive">Alert primitive Content</AlertPrimitive>;
```
npm package: @real-system/animation
Description: Animation library for real system.
Author: Mike Wolf
Latest version: 0.0.6

<h1 align="center">@real-system/animation</h1>
<p align="center">Animation library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/animation"><img src="https://badgen.net/npm/v/@real-system/animation?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/animation"><img src="https://badgen.net/bundlephobia/min/@real-system/animation" alt="minified size" height="18"/></a>
</p>

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install animation

# npm
$ npm install @real-system/animation
# yarn
$ yarn add @real-system/animation
```

### Code Example

```javascript
import { reactSpring } from '@real-system/animation';

...

```
npm package: @real-system/animation-library
Description: Animation library for real system.
Author: Mike Wolf
Latest version: 0.0.25

<h1 align="center">@real-system/animation-library</h1>
<p align="center">Animation library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/animation-library"><img src="https://badgen.net/npm/v/@real-system/animation-library?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install animation

# npm
$ npm install @real-system/animation-library
# yarn
$ yarn add @real-system/animation-library
```

### Code Example

```typescript
import { reactSpring } from '@real-system/animation-library';

...

```
npm package: @real-system/aria-button
Description: Button accessibility hook for real system.
Author: Mike Wolf
Latest version: 0.0.4

<h1 align="center">@real-system/aria-button</h1>
<p align="center">Button accessibility hook for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/aria-button"><img src="https://badgen.net/npm/v/@real-system/aria-button?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/aria-button"><img src="https://badgen.net/bundlephobia/min/@real-system/aria-button" alt="minified size" height="18"/></a>
</p>

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install aria-button

# npm
$ npm install @real-system/aria-button
# yarn
$ yarn add @real-system/aria-button
```

### Code Example

```javascript
import { useButton } from '@real-system/aria-button';

...

```
npm package: @real-system/ariakit-library
Description: Ariakit library for real system.
Author: Mike Wolf
Latest version: 0.0.30

<h1 align="center">@real-system/ariakit-library</h1>
<p align="center">Ariakit library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/ariakit-library"><img src="https://badgen.net/npm/v/@real-system/ariakit-library?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install ariakit-library

# npm
$ npm install @real-system/ariakit-library
# yarn
$ yarn add @real-system/ariakit-library
```

### Code Example

```typescript
import { Popover } from '@real-system/ariakit-library';

...

```
npm package: @real-system/aspect-ratio
Description: Aspect ratio component for real system used for sizing media e g image video map.
Author: Mike Wolf
Latest version: 0.0.37

<h1 align="center">@real-system/aspect-ratio</h1>
<p align="center">Aspect ratio component for real system used for sizing media e g image video map.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/aspect-ratio"><img src="https://badgen.net/npm/v/@real-system/aspect-ratio?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/elements-primitive @real-system/styled-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/elements-primitive @real-system/styled-library @real-system/utils-library

# install aspect-ratio

# npm
$ npm install @real-system/aspect-ratio
# yarn
$ yarn add @real-system/aspect-ratio
```

### Code Example

```typescript
import { AspectRatio } from '@real-system/aspect-ratio';

...

```
npm package: @real-system/badge
Description: Badge component for real system.
Author: Mike Wolf
Latest version: 0.0.35

<h1 align="center">@real-system/badge</h1>
<p align="center">Badge component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/badge"><img src="https://badgen.net/npm/v/@real-system/badge?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/utils-library @real-system/styled-library @real-system/elements-primitive
# yarn
$ yarn add react react-dom @real-system/utils-library @real-system/styled-library @real-system/elements-primitive

# install badge

# npm
$ npm install @real-system/badge
# yarn
$ yarn add @real-system/badge
```

### Code Example

```typescript
import { Badge } from '@real-system/badge';

...

```
npm package: @real-system/box
Description: A flexible div for building layouts in Real System.
Author: Mike Wolf
Latest version: 0.0.39

<h1 align="center">@real-system/box</h1>
<p align="center">Real System's primitive Box component.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/box"><img src="https://badgen.net/npm/v/@real-system/box?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

### Installation

```bash
# install peer dependencies

# npm
$ npm install --save @real-system/styled-library react react-dom
# yarn
$ yarn add @real-system/styled-library react react-dom

# install box

# npm
$ npm install --save @real-system/box
# yarn
$ yarn add @real-system/box
```

### Code Example

```jsx
import { RealSystemProvider } from '@real-system/styled-library';
import { Box } from '@real-system/box';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Box as="aside" bgColor="white" display="flex" flexDirection="column">
        <Box display="flex">...</Box>
      </Box>
    </RealSystemProvider>
  );
};
```
npm package: @real-system/box-primitive
Description: A basic div with style props that should be used to build other components
Author: Mike Wolf
Latest version: 0.0.24

<h1 align="center">@real-system/box-primitive</h1>
<p align="center">Real System's primitive Box component.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/box-primitive"><img src="https://badgen.net/npm/v/@real-system/box-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Usage

### Installation

```bash
# install peer dependencies

# npm
$ npm install --save @real-system/styled-library react react-dom
# yarn
$ yarn add @real-system/styled-library react react-dom

# install box

# npm
$ npm install --save @real-system/box-primitive
# yarn
$ yarn add @real-system/box-primitive
```

### Code Example

```jsx
import { ThemeProvider } from '@real-system/styled-library';
import { Box, BoxAs } from '@real-system/box-primitive';

const Aside = BoxAs('aside');

const MyComponent = () => {
  return (
    <ThemeProvider>
      <Aside background="white" display="flex" flexDirection="column">
        <Box display="flex">...</Box>
      </Aside>
    </ThemeProvider>
  );
};

```
npm package: @real-system/button
Description: Real System Button component
Author: Mike Wolf
Latest version: 0.0.68

<h1 align="center">@real-system/button</h1>
<p align="center">Real System's Button component.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/button"><img src="https://badgen.net/npm/v/@real-system/button?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install @real-system/styled-library @real-system/elements-primitive @real-system/utils-library react react-dom
# yarn
$ yarn add @real-system/styled-library @real-system/elements-primitive @real-system/utils-library react react-dom

# install button

# npm
$ npm install @real-system/button
# yarn
$ yarn add @real-system/button
```

### Code Example

```jsx
import { RealSystemProvider } from '@real-system/styled-library';
import { Button } from '@real-system/button';

const MyButton = () => {
  return (
    <Button colorScheme="purple" size="lg">
      Button
    </Button>
  );
};
```
npm package: @real-system/button-primitive
Description: Button primitive components for real system.
Author: Mike Wolf
Latest version: 0.0.51

<h1 align="center">@real-system/button-primitive</h1>
<p align="center">Button primitive components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/button-primitive"><img src="https://badgen.net/npm/v/@real-system/button-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install button-primitive

# npm
$ npm install @real-system/button-primitive
# yarn
$ yarn add @real-system/button-primitive
```

### Code Example

```typescript
import type { ButtonPrimitiveProps } from '@real-system/button-primitive';
import { ButtonPrimitive } from '@real-system/button-primitive';

...

```
npm package: @real-system/checkbox
Description: Checkbox.
Author: Mike Wolf
Latest version: 0.0.52

<h1 align="center">@real-system/checkbox</h1>
<p align="center">Checkbox.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/checkbox"><img src="https://badgen.net/npm/v/@real-system/checkbox?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/a11y-library @real-system/state-library @real-system/styled-library @real-system/typography @real-system/utils-library @real-system/elements-primitive
# yarn
$ yarn add react react-dom @real-system/a11y-library @real-system/state-library @real-system/styled-library @real-system/typography @real-system/utils-library @real-system/elements-primitive

# install checkbox

# npm
$ npm install @real-system/checkbox
# yarn
$ yarn add @real-system/checkbox
```

### Code Example

```jsx
import { Checkbox, CheckboxGroup } from '@real-system/checkbox';

const MyCheckbox = (args) => (
  <Checkbox
    helpText="Determines if the user has permission to add, edit and delete other users"
    {...args}
  />
);

const MyCheckboxGroup = () => {
  return (
    <CheckboxGroup
      label="What engineering level is the new team member?"
      defaultValue={['associate']}
      helpText="Select at least 1 level for the new engineer"
      {...args}>
      <CheckboxGroup.Item value="architect">Architect</CheckboxGroup.Item>
      <CheckboxGroup.Item value="principle">Principle</CheckboxGroup.Item>
      <CheckboxGroup.Item value="staff">Staff</CheckboxGroup.Item>
      <CheckboxGroup.Item value="senior" disabled>
        Senior
      </CheckboxGroup.Item>
      <CheckboxGroup.Item value="mid" disabled>
        Mid
      </CheckboxGroup.Item>
      <CheckboxGroup.Item value="associate" disabled>
        Associate
      </CheckboxGroup.Item>
    </CheckboxGroup>
  );
};
```
npm package: @real-system/core
Description: Contains all the packages from Real System.
Author: Michael Wolf
Latest version: 0.0.71

<h1 align="center">@real-system/core</h1>
<p align="center">One bundle containing every package within Real System.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/core"><img src="https://badgen.net/npm/v/@real-system/core?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

### Installation

```bash
# npm
$ npm install --save @real-system/core react react-dom

# yarn
$ yarn add @real-system/core react react-dom
```

### Code Example

```jsx
import { RealSystemProvider } from '@real-system/core/theme-library';
import { Box } from '@real-system/core/box-primitive';
import { Button } from '@real-system/core/button';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Box>
        <Button>Button</Button>
      </Box>
    </RealSystemProvider>
  );
};
```

## How bundling works

### Build Procedure (see `prebuild` and `build` npm scripts)

1. Fetch all the packages with yarn workspaces
2. Filter out all packages that aren't productionized or not in core `packageJson.status === 'production'`
3. Update core's package.json dependencies
4. Generate
   1. core index bundle
   2. unbarreled export bundles
   3. core's .gitignore to include unbarreled exprots
   4. each package's package.json
npm package: @real-system/descendants-library
Description: Descendant node element manager for real system.
Author: Mike Wolf
Latest version: 0.0.20

<h1 align="center">@real-system/descendants-library</h1>
<p align="center">Descendant node element manager for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/descendants-library"><img src="https://badgen.net/npm/v/@real-system/descendants-library?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/a11y-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/a11y-library @real-system/utils-library

# install descendants-library

# npm
$ npm install @real-system/descendants-library
# yarn
$ yarn add @real-system/descendants-library
```

### Code Example

```typescript
import { DescendantManager } from '@real-system/descendants-library';

...

```
npm package: @real-system/dialog
Description: Dialog component for real system.
Author: Mike Wolf
Latest version: 0.0.60

<h1 align="center">@real-system/dialog</h1>
<p align="center">Dialog component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/dialog"><img src="https://badgen.net/npm/v/@real-system/dialog?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/elements-primitive @real-system/button @real-system/dialog-primitive @real-system/styled-library
# yarn
$ yarn add react react-dom @real-system/elements-primitive @real-system/button @real-system/dialog-primitive @real-system/styled-library

# install dialog

# npm
$ npm install @real-system/dialog
# yarn
$ yarn add @real-system/dialog
```

### Code Example

```typescript
import { Dialog } from '@real-system/dialog';

...

```
npm package: @real-system/dialog-primitive
Description: Dialog primitive components for real system.
Author: Mike Wolf
Latest version: 0.0.36

<h1 align="center">@real-system/dialog-primitive</h1>
<p align="center">Dialog primitive for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/dialog-primitive"><img src="https://badgen.net/npm/v/@real-system/dialog-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install dialog-primitive

# npm
$ npm install @real-system/dialog-primitive
# yarn
$ yarn add @real-system/dialog-primitive
```

### Code Example

```typescript
import { * } from '@real-system/dialog-primitive';

...

```
npm package: @real-system/disclosure
Description: Disclosure components for real system.
Author: Mike Wolf
Latest version: 0.0.23

<h1 align="center">@real-system/disclosure</h1>
<p align="center">Disclosure components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/disclosure"><img src="https://badgen.net/npm/v/@real-system/disclosure?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/utils-library @real-system/disclosure-primitive @real-system/styled-library @real-system/elements-primitive
# yarn
$ yarn add react react-dom @real-system/utils-library @real-system/disclosure-primitive @real-system/styled-library @real-system/elements-primitive

# install disclosure

# npm
$ npm install @real-system/disclosure
# yarn
$ yarn add @real-system/disclosure
```

### Code Example

```tsx
import { Disclosure } from '@real-system/disclosure';
import { Icon } from '@real-system/icon';
const DefaultDisclosure = () => {
  return (
    <Disclosure>
      <Disclosure.Toggle>Accordion Item 1</Disclosure.Toggle>
      <Disclosure.Content>Some content to expand and collapse</Disclosure.Content>
    </Disclosure>
  )
}

const ContainedDisclosure = () => {
  return (
    <Disclosure contained>
      <Disclosure.Toggle>Accordion Item 1</Disclosure.Toggle>
      <Disclosure.Content>Some content to expand and collapse</Disclosure.Content>
    </Disclosure>
  )
}

const CustomHeadingDisclosure = () => {
  return (
    <Disclosure contained>
      {({ visible }) => (
        <Disclosure.Trigger hideToggleIcon>
          <Icon icon={visible ? 'arrow-down' : 'arrow-right'} mr={4} />
          <Disclosure.Heading>Accordion Item 1</Disclosure.Heading>
        </Disclosure.Trigger>
        <Disclosure.Content>Some content to expand and collapse</Disclosure.Content>
      )}
    </Disclosure>
  )
}
```
npm package: @real-system/disclosure-primitive
Description: Disclosure primitive components for real system.
Author: Mike Wolf
Latest version: 0.0.19

<h1 align="center">@real-system/disclosure-primitive</h1>
<p align="center">Disclosure primitive components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/disclosure-primitive"><img src="https://badgen.net/npm/v/@real-system/disclosure-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library

# install disclosure-primitive

# npm
$ npm install @real-system/disclosure-primitive
# yarn
$ yarn add @real-system/disclosure-primitive
```

### Code Example

```typescript
import { DisclosurePrimitive } from '@real-system/disclosure-primitive';

...

```
npm package: @real-system/elements-primitive
Description: Element primitives with built-in style props for real system.
Author: Mike Wolf
Latest version: 0.0.29

<h1 align="center">@real-system/elements-primitive</h1>
<p align="center">Element primitives with built-in style props for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/elements-primitive"><img src="https://badgen.net/npm/v/@real-system/elements-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/styled-library
# yarn
$ yarn add react react-dom @real-system/styled-library

# install elements-primitive

# npm
$ npm install @real-system/elements-primitive
# yarn
$ yarn add @real-system/elements-primitive
```

### Code Example

```typescript
import { real, RealElementPrimitiveProps } from '@real-system/elements-primitive';

const H1 = ({ children, ...restProps }: RealElementPrimitiveProps) => {
  return (
    <real.h1
      fontSize={4}
      fontWeight={3}
      lineHeight={4}
      margin={0}
      {...restProps}>
      {children}
    </real.h1>
  )
}

```
npm package: @real-system/field
Description: Field wrapper component for real system.
Author: Mike Wolf
Latest version: 0.0.44

<h1 align="center">@real-system/field</h1>
<p align="center">Field wrapper component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/field"><img src="https://badgen.net/npm/v/@real-system/field?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/flex @real-system/styled-library @real-system/typography
# yarn
$ yarn add react react-dom @real-system/flex @real-system/styled-library @real-system/typography

# install field

# npm
$ npm install @real-system/field
# yarn
$ yarn add @real-system/field
```

### Code Example

```typescript
import { Field } from '@real-system/field';

...

```
npm package: @real-system/flex
Description: Flex layout component for real system.
Author: Mike Wolf
Latest version: 0.0.58

<h1 align="center">@real-system/flex</h1>
<p align="center">Flex layout component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/flex"><img src="https://badgen.net/npm/v/@real-system/flex?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/elements-primitive @real-system/styled-library
# yarn
$ yarn add react react-dom @real-system/elements-primitive @real-system/styled-library

# install flex

# npm
$ npm install @real-system/flex
# yarn
$ yarn add @real-system/flex
```

### Code Example

```typescript
import { Flex } from '@real-system/flex';

...

```
npm package: @real-system/icon
Description: icon component for real system
Author: Mike Wolf
Latest version: 0.0.65

<h1 align="center">@real-system/icon</h1>
<p align="center">Real System's Icon component.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/icon"><img src="https://badgen.net/npm/v/@real-system/icon?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

### Installation

```bash
# install peer dependencies

# npm
$ npm install --save @real-system/styled-library @real-system/elements-primitive react react-dom
# yarn
$ yarn add @real-system/styled-library @real-system/elements-primitive react react-dom

# install icon

# npm
$ npm install --save @real-system/icon
# yarn
$ yarn add @real-system/icon
```

### Code Example

```jsx
import { RealSystemProvider } from '@real-system/styled-library';
import { Button } from '@real-system/icon';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Button>Button</Button>
    </RealSystemProvider>
  );
};
```
npm package: @real-system/input
Description: Real System input component
Author: Mike Wolf
Latest version: 0.0.65

<h1 align="center">@real-system/input</h1>
<p align="center">Real System's Input components.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/input"><img src="https://badgen.net/npm/v/@real-system/input?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install @real-system/styled-library @real-system/elements-primitive @real-system/utils-library react react-dom
# yarn
$ yarn add @real-system/styled-library @real-system/elements-primitive @real-system/utils-library react react-dom

# install input

# npm
$ npm install @real-system/input
# yarn
$ yarn add @real-system/input
```

### Code Example

```jsx
import { RealSystemProvider } from '@real-system/styled-library';
import { Input } from '@real-system/core/input';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Input>Body text...</Input>
    </RealSystemProvider>
  );
};
```
npm package: @real-system/link
Description: Link component for real system.
Author: Mike Wolf
Latest version: 0.0.36

<h1 align="center">@real-system/link</h1>
<p align="center">Link component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/link"><img src="https://badgen.net/npm/v/@real-system/link?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/utils-library @real-system/styled-library @real-system/elements-primitive @real-system/styled-library @real-system/icon
# yarn
$ yarn add react react-dom @real-system/utils-library @real-system/styled-library @real-system/elements-primitive @real-system/styled-library @real-system/icon

# install link

# npm
$ npm install @real-system/link
# yarn
$ yarn add @real-system/link
```

### Code Example

```typescript
import { Link } from '@real-system/link';

...

```
npm package: @real-system/menu
Description: Menu component for real system.
Author: Mike Wolf
Latest version: 0.0.39

<h1 align="center">@real-system/menu</h1>
<p align="center">Menu component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/menu"><img src="https://badgen.net/npm/v/@real-system/menu?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/animation-library @real-system/ariakit-library @real-system/elements-primitive @real-system/state-library @real-system/styled-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/animation-library @real-system/ariakit-library @real-system/elements-primitive @real-system/state-library @real-system/styled-library @real-system/utils-library

# install menu

# npm
$ npm install @real-system/menu
# yarn
$ yarn add @real-system/menu
```

### Code Example

```jsx
import { Menu, MenuProps } from '@real-system/menu';

/**
 * const { Button, Group, Item, List, Separator } = Menu;
 * const { Label } = Group
 * const { Checkbox,  Command, Icon, Link, Radio } = Item
 * */

const MyComponent = () => {
  return (
    <Menu values={values} onSelect={setValues}>
      <Menu.Button
        size="sm"
        variant="outline"
        leadingIcon={<Icon icon="eye" size="xs" />}>
        Watch
      </Menu.Button>
      <Menu.List>
        <Menu.Item>My Account</Menu.Item>
        <Menu.Item>
          <Menu.Item.Icon icon="pencil-alt" />
          Edit
          <Menu.Item.Command>E</Menu.Item.Command>
        </Menu.Item>
        <Menu.Item.Radio name="watching" value="issues">
          Issues
        </Menu.Item.Radio>
        <Menu.Item.Checkbox name="watching" value="pull-requests">
          Pull requests
        </Menu.Item.Checkbox>
        <Menu.Separator />
        <Menu.Group>
          <Menu.Group.Label>Help</Menu.Group.Label>
          <Menu.Item>Docs</Menu.Item>
          <Menu.Item.Link
            href="https://system.themikewolf.com"
            external
            showExternal>
            FAQ
          </Menu.Item.Link>
        </Menu.Group>
      </Menu.List>
    </Menu>
  );
};
```
npm package: @real-system/menu-primitive
Description: Menu primitive components for real system.
Author: Mike Wolf
Latest version: 0.0.25

<h1 align="center">@real-system/menu-primitive</h1>
<p align="center">Menu primitive components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/menu-primitive"><img src="https://badgen.net/npm/v/@real-system/menu-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install menu-primitive

# npm
$ npm install @real-system/menu-primitive
# yarn
$ yarn add @real-system/menu-primitive
```

### Code Example

```typescript
import type {
  MenuItemCheckboxPrimitiveProps,
  MenuItemPrimitiveProps,
  MenuItemRadioPrimitiveProps,
  MenuPrimitiveProps,
  MenuSeparatorPrimitiveProps,
  MenuStorePrimitive,
  MenuStorePrimitiveProps,
} from '@real-system/menu-primitive';
import {
  MenuArrowPrimitive,
  MenuButtonPrimitive,
  MenuGroupLabelPrimitive,
  MenuGroupPrimitive,
  MenuItemCheckboxPrimitive,
  MenuItemCheckPrimitive,
  MenuItemPrimitive,
  MenuItemRadioPrimitive,
  MenuPrimitive,
  MenuSeparatorPrimitive,
  useMenuStorePrimitive,
} from '@real-system/menu-primitive';

...

```
npm package: @real-system/pin-input
Description: Pin input component for real system.
Author: Mike Wolf
Latest version: 0.0.31

<h1 align="center">@real-system/pin-input</h1>
<p align="center">Pin input component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/pin-input"><img src="https://badgen.net/npm/v/@real-system/pin-input?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/descendants-library @real-system/styled-library @real-system/utils-library @real-system/state-library
# yarn
$ yarn add react react-dom @real-system/descendants-library @real-system/styled-library @real-system/utils-library @real-system/state-library

# install pin-input

# npm
$ npm install @real-system/pin-input
# yarn
$ yarn add @real-system/pin-input
```

### Code Example

```typescript
import { PinInput } from '@real-system/pin-input';

...

```
npm package: @real-system/popover
Description: Popover component for real system.
Author: Mike Wolf
Latest version: 0.0.43

<h1 align="center">@real-system/popover</h1>
<p align="center">Popover component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/popover"><img src="https://badgen.net/npm/v/@real-system/popover?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library @real-system/animation-library @real-system/elements-primitive @real-system/button @real-system/styled-library @real-system/flex @real-system/typography @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library @real-system/animation-library @real-system/elements-primitive @real-system/button @real-system/styled-library @real-system/flex @real-system/typography @real-system/utils-library

# install popover

# npm
$ npm install @real-system/popover
# yarn
$ yarn add @real-system/popover
```

### Code Example

```typescript
import { Popover } from '@real-system/popover';

/** or import each component
import {
  PopoverButton,
  PopoverContainer,
  PopoverDescription,
  PopoverDismiss,
  PopoverHeading,
} from '@real-system/popover';
**/

const MyComponent = (args) => {
  return (
    <Popover.Container placement="auto">
      <Popover.Button>Open Popover</Popover.Button>
      <Popover hideCloseButton={true}>
        <Popover.Heading mb={6}>Meet Popover</Popover.Heading>
        <Popover.Description mb={8}>
          Hello there. I am a popover! Use me as a non-modal dialog to display
          additional rich content above your UI.
        </Popover.Description>
        <Popover.Dismiss variant="primary">Confirm</Popover.Dismiss>
      </Popover>
    </Popover.Container>
  );
};

export const Default = Template.bind({});


```
npm package: @real-system/popover-primitive
Description: Popover primitive components for real system.
Author: Mike Wolf
Latest version: 0.0.25

<h1 align="center">@real-system/popover-primitive</h1>
<p align="center">Popover primitive components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/popover-primitive"><img src="https://badgen.net/npm/v/@real-system/popover-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library

# install popover-primitive

# npm
$ npm install @real-system/popover-primitive
# yarn
$ yarn add @real-system/popover-primitive
```

### Code Example

```typescript
import type {
  PopoverDisclosurePrimitiveProps,
  PopoverPrimitiveProps,
  PopoverStorePrimitive,
  PopoverStorePrimitiveProps,
} from '@real-system/popover-primitive';
import {
  PopoverArrowPrimitive,
  PopoverDescriptionPrimitive,
  PopoverDisclosurePrimitive,
  PopoverDismissPrimitive,
  PopoverHeadingPrimitive,
  PopoverPrimitive,
  usePopoverStorePrimitive,
} from '@real-system/popover-primitive';

...

```
npm package: @real-system/portal-primitive
Description: Portal primitive component for real system.
Author: Mike Wolf
Latest version: 0.0.24

<h1 align="center">@real-system/portal-primitive</h1>
<p align="center">Portal primitive component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/portal-primitive"><img src="https://badgen.net/npm/v/@real-system/portal-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install portal-primitive

# npm
$ npm install @real-system/portal-primitive
# yarn
$ yarn add @real-system/portal-primitive
```

### Code Example

```typescript
import { PortalPrimitive } from '@real-system/portal-primitive';

const MyComponent = () => (
  <PortalPrimitive>Portal primitive content</PortalPrimitive>
);
```
npm package: @real-system/radio-group
Description: Radio group components for real system.
Author: Mike Wolf
Latest version: 0.0.46

<h1 align="center">@real-system/radio-group</h1>
<p align="center">Radio button components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/radio-group"><img src="https://badgen.net/npm/v/@real-system/radio-group?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/elements-primitive @real-system/flex @real-system/a11y-library @real-system/state-library @real-system/styled-library @real-system/utils-library @real-system/visually-hidden
# yarn
$ yarn add react react-dom @real-system/elements-primitive @real-system/flex @real-system/a11y-library @real-system/state-library @real-system/styled-library @real-system/utils-library @real-system/visually-hidden

# install radio

# npm
$ npm install @real-system/radio-group
# yarn
$ yarn add @real-system/radio-group
```

### Code Example

```typescript
import { RadioGroup } from '@real-system/radio-group';
// or
// import { RadioGroup, Radio } from '@real-system/radio-group';

const MyComponent = () => {

  return (
    <RadioGroup label="Favorite pet" {...args}>
      <RadioGroup.Radio value="dog">Dog</RadioGroup.Radio>
      <RadioGroup.Radio value="cat">Cat</RadioGroup.Radio>
      <RadioGroup.Radio value="fish">Fish</RadioGroup.Radio>
      <RadioGroup.Radio value="hamster" disabled>
        Hamster
      </RadioGroup.Radio>
    </RadioGroup>
  )
}
...

```
npm package: @real-system/react-aria
Description: React aria library for real system.
Author: Mike Wolf
Latest version: 0.0.1

<h1 align="center">@real-system/react-aria</h1>
<p align="center">React aria library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/react-aria"><img src="https://badgen.net/npm/v/@real-system/react-aria?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/react-aria"><img src="https://badgen.net/bundlephobia/min/@real-system/react-aria" alt="minified size" height="18"/></a>
</p>

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install react-aria

# npm
$ npm install @real-system/react-aria
# yarn
$ yarn add @real-system/react-aria
```

### Code Example

```javascript
import { useButton, useCheckbox, useCheckboxGroup, useCheckboxGroupItem } from '@real-system/react-aria';

...

```
npm package: @real-system/react-aria-library
Description: React aria library for real system.
Author: Mike Wolf
Latest version: 0.0.6

<h1 align="center">@real-system/react-aria-library</h1>
<p align="center">React aria library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/react-aria-library"><img src="https://badgen.net/npm/v/@real-system/react-aria-library?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/react-aria-library"><img src="https://badgen.net/bundlephobia/min/@real-system/react-aria-library" alt="minified size" height="18"/></a>
</p>

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install react-aria

# npm
$ npm install @real-system/react-aria-library
# yarn
$ yarn add @real-system/react-aria-library
```

### Code Example

```javascript
import { useButton, useCheckbox, useCheckboxGroup, useCheckboxGroupItem } from '@real-system/react-aria-library';

...

```
npm package: @real-system/react-laag-library
Description: React laag library abstraction for real system.
Author: Mike Wolf
Latest version: 0.0.1

<h1 align="center">@real-system/react-laag-library</h1>
<p align="center">React laag library abstraction for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/react-laag-library"><img src="https://badgen.net/npm/v/@real-system/react-laag-library?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/react-laag-library"><img src="https://badgen.net/bundlephobia/min/@real-system/react-laag-library" alt="minified size" height="18"/></a>
</p>

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom 
# yarn
$ yarn add react react-dom 

# install react-laag-library

# npm
$ npm install @real-system/react-laag-library
# yarn
$ yarn add @real-system/react-laag-library
```

### Code Example

```javascript
import { laag } from '@real-system/react-laag-library';

...

```
npm package: @real-system/select
Description: Select component for real system.
Author: Mike Wolf
Latest version: 0.0.34

<h1 align="center">@real-system/select</h1>
<p align="center">Select component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/select"><img src="https://badgen.net/npm/v/@real-system/select?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library @real-system/elements-primitive @real-system/styled-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library @real-system/elements-primitive @real-system/styled-library @real-system/utils-library

# install select

# npm
$ npm install @real-system/select
# yarn
$ yarn add @real-system/select
```

### Code Example

```jsx
import {
  Select,
  SelectContainer,
  SelectGroup,
  SelectGroupLabel,
  SelectItem,
  SelectSeparator,
} from '@real-system/select';
import { Text } from '@real-system/typography';

const DefaultSelect = (args) => {
  return (
    <Select label="Select a fruit" maxW="20rem">
      <SelectItem value="Apple" />
      <SelectItem value="Grape" disabled />
      <SelectItem value="Melon" />
    </Select>
  );
};

const SelctGroupExample = (args) => {
  return (
    <Select label="Select a fruit" maxW="20rem">
      <SelectGroup>
        <SelectGroupLabel>Fruits</SelectGroupLabel>
        <SelectItem value="Apple" />
        <SelectItem value="Grape" disabled />
        <SelectItem value="Melon" />
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectGroupLabel>Vegatables</SelectGroupLabel>
        <SelectItem value="Lettuce" />
        <SelectItem value="Pepper" disabled />
        <SelectItem value="Onion" />
      </SelectGroup>
    </Select>
  );
};
```
npm package: @real-system/select-primitive
Description: Select primitive components for real system.
Author: Mike Wolf
Latest version: 0.0.25

<h1 align="center">@real-system/select-primitive</h1>
<p align="center">Select primitive components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/select-primitive"><img src="https://badgen.net/npm/v/@real-system/select-primitive?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
</p>

## Installation

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library

# install select-primitive

# npm
$ npm install @real-system/select-primitive
# yarn
$ yarn add @real-system/select-primitive
```

### Code Example

```typescript
import type {
  SelectGroupLabelPrimitiveProps,
  SelectGroupPrimitiveProps,
  SelectItemPrimitiveProps,
  SelectPopoverPrimitiveProps,
  SelectPrimitiveProps,
  SelectSeparatorPrimitiveProps,
  SelectProviderPrimitiveProps,
} from '@real-system/select-primitive';
import {
  SelectGroupLabelPrimitive,
  SelectGroupPrimitive,
  SelectItemPrimitive,
  SelectLabelPrimitive,
  SelectPopoverPrimitive,
  SelectPrimitive,
  SelectProviderPrimitive,
  SelectSeparatorPrimitive,
} from '@real-system/select-primitive';

...

```