open-index/open-npm huggingface dataset:
npm package: @real-system/separator
Description: Separator component for real system.
Author: Mike Wolf
Latest version: 0.0.35

<h1 align="center">@real-system/separator</h1>
<p align="center">Separator component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/separator"><img src="https://badgen.net/npm/v/@real-system/separator?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/styled-library @real-system/elements-primitive
# yarn
$ yarn add react react-dom @real-system/ariakit-library @real-system/styled-library @real-system/elements-primitive

# install separator

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

### Code Example

```typescript
import { Separator } from '@real-system/separator';
import type { SeparatorProps } from '@real-system/separator';

...

```
npm package: @real-system/separator-primitive
Description: Separator primitive component for real system.
Author: Mike Wolf
Latest version: 0.0.25

<h1 align="center">@real-system/separator-primitive</h1>
<p align="center">Separator primitive component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/separator-primitive"><img src="https://badgen.net/npm/v/@real-system/separator-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 separator-primitive

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

### Code Example

```typescript
import type { SeparatorPrimitiveProps } from '@real-system/separator-primitive';
import { SeparatorPrimitive } from '@real-system/separator-primitive';

...

```
npm package: @real-system/spinner
Description: Real System Spinner component
Author: Mike Wolf
Latest version: 0.0.63

<h1 align="center">@real-system/spinner</h1>
<p align="center">Real System's Spinner components.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/spinner"><img src="https://badgen.net/npm/v/@real-system/spinner?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 spinner

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

### Code Example

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

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Spinner />
    </RealSystemProvider>
  );
};
```
npm package: @real-system/stack
Description: Stack component that distributes layouts for real system.
Author: Mike Wolf
Latest version: 0.0.25

<h1 align="center">@real-system/stack</h1>
<p align="center">Stack component that distributes layouts for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/stack"><img src="https://badgen.net/npm/v/@real-system/stack?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 stack

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

### Code Example

```jsx
import { Stack, StackItem, StackSeparator } from '@real-system/stack';
import { Separator } from '@real-system/separator'; // <-- `yarn add @real-system/separator`

const MyComponent = () => {
  return (
    <>
      Vertical Stack Approaches
      <Stack separator={<StackSeparator />}>
        <Stack.Item>Vertical<Stack.Item>
        <StackItem>Stack<StackItem>
      </Stack>
      Will align-center that stack items
      <Stack.Vertical>...</Stack.Vertical>

      Horizontal Stack Approaches
      <Stack inline>Horizontal Stack</Stack>
      <Stack direction="row">...</Stack>
      <Stack.Horizontal>...</Stack.Horizontal>

      Custom Separator
      Will align-center that stack items
      <Stack separator={<Separator borderColor="red-200" />}>Custom Separator</Stack>
    </>
  )
}

```
npm package: @real-system/state
Description: State library for real system.
Author: Mike Wolf
Latest version: 0.0.6

<h1 align="center">@real-system/state</h1>
<p align="center">State library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/state"><img src="https://badgen.net/npm/v/@real-system/state?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/state"><img src="https://badgen.net/bundlephobia/min/@real-system/state" 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 state

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

### Code Example

```javascript
import { constate } from '@real-system/state';

...

```
npm package: @real-system/state-library
Description: State library for real system.
Author: Mike Wolf
Latest version: 0.0.24

<h1 align="center">@real-system/state-library</h1>
<p align="center">State library for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/state-library"><img src="https://badgen.net/npm/v/@real-system/state-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 state

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

### Code Example

```typescript
import { constate } from '@real-system/state-library';

...

```
npm package: @real-system/styled-library
Description: Styled system for real system.
Author: Mike Wolf
Latest version: 0.0.27

<h1 align="center">@real-system/styled-library</h1>
<p align="center">The styling system for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/styled-library"><img src="https://badgen.net/npm/v/@real-system/styled-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 styled-library

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

### Code Example

```typescript
import { theme } from '@real-system/styled-library';

...

```
npm package: @real-system/styling
Description: theme and components for real system
Author: Mike Wolf
Latest version: 0.0.12

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

## Usage

### Installation

```bash
# install peer dependencies

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

# install styling

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

### Code Example

```jsx
import styled from '@real-system/styling';

const Block = styled.div`
  display: block;
`;

const MyComponent = () => {
  return (
    <Block>
      ...
    </Block>
  );
};

```
npm package: @real-system/styling-library
Description: theme and components for real system
Author: Mike Wolf
Latest version: 0.0.17

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

## Usage

### Installation

```bash
# install peer dependencies

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

# install styling

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

### Code Example

```jsx
import styled from '@real-system/styling-library';

const Block = styled('div')`
  display: block;
`;

const MyComponent = () => {
  return (
    <Block>
      ...
    </Block>
  );
};

```

## Project Status

**UNDER DEVELOPMENT**

- [x] Build custom style props for easier spreading of props throughout component API's
- [ ] Build a custom styled-system for deeper customization/requirements and ease-of-use within real system composition
- [ ] Build abstraction layer of emotion API
npm package: @real-system/switch
Description: Switch component for real system.
Author: Mike Wolf
Latest version: 0.0.11

<h1 align="center">@real-system/switch</h1>
<p align="center">Switch component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/switch"><img src="https://badgen.net/npm/v/@real-system/switch?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/typography @real-system/utils-library @real-system/styled-library @real-system/elements-primitive
# yarn
$ yarn add react react-dom @real-system/ariakit-library @real-system/typography @real-system/utils-library @real-system/styled-library @real-system/elements-primitive

# install switch

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

### Code Example

```jsx
import { Switch } from '@real-system/switch';

const MySwitch = () => <Switch />;
```
npm package: @real-system/text
Description: Text primitive for real system.
Author: Mike Wolf
Latest version: 0.0.13

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

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/box @real-system/styling @real-system/theme @real-system/utils
# yarn
$ yarn add react react-dom @real-system/box @real-system/styling @real-system/theme @real-system/utils

# install text

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

### Code Example

```typescript
import { Text, TextProps, safelySpreadTextProps } from '@real-system/text';

const H1 = (props: TextProps) => (
  <Text as="h1" fontSize={10} {...safelySpreadTextProps(props)}>
    The quick brown fox jumped over the lazy dog.
  </Text>
);

```
npm package: @real-system/text-primitive
Description: Text primitive for real system.
Author: Mike Wolf
Latest version: 0.0.13

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

## Usage

```bash
# install peer dependencies

# npm
$ npm install react react-dom @real-system/box-primitive @real-system/styling-library @real-system/theme-library @real-system/utils
# yarn
$ yarn add react react-dom @real-system/box-primitive @real-system/styling-library @real-system/theme-library @real-system/utils

# install text

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

### Code Example

```typescript
import { Text, TextPrimitiveProps, safelySpreadTextProps } from '@real-system/text-primitive';

const H1 = (props: TextPrimitiveProps) => (
  <Text as="h1" fontSize={10} {...safelySpreadTextProps(props)}>
    The quick brown fox jumped over the lazy dog.
  </Text>
);

```
npm package: @real-system/textarea
Description: Textarea component for real system.
Author: Mike Wolf
Latest version: 0.0.49

<h1 align="center">@real-system/textarea</h1>
<p align="center">Textarea component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/textarea"><img src="https://badgen.net/npm/v/@real-system/textarea?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/input @real-system/styled-library
# yarn
$ yarn add react react-dom @real-system/input @real-system/styled-library

# install textarea

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

### Code Example

```typescript
import { Textarea } from '@real-system/textarea';

...

```
npm package: @real-system/theme
Description: theming for real system
Author: Mike Wolf
Latest version: 0.0.12

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

## Usage

### Installation

```bash
# install peer dependencies

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

# install theme

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

### Code Example

```jsx
import { ThemeProvider, useToken } from '@real-system/theme';

const OtherComponent = () => {
  const token = useToken('color-background');
  return (
    <div style={{ backgroundColor: token }}>...</div>
  );
};

const MyComponent = () => {
  return (
    <ThemeProvider>
      <OtherComponent />
    </ThemeProvider>
  );
};

```
npm package: @real-system/theme-library
Description: theming for real system
Author: Mike Wolf
Latest version: 0.0.23

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

## Usage

### Installation

```bash
# install peer dependencies

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

# install theme

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

### Code Example

```jsx
import { ThemeProvider, useTokens } from '@real-system/theme-library';

const OtherComponent = () => {
  const [bgColor, textColor] = useToken({
    colors: 'white',
    colors: 'gray-500'
  });
  return (
    <div style={{ backgroundColor: bgColor, color: textColor }}>...</div>
  );
};

const MyComponent = () => {
  return (
    <ThemeProvider>
      <OtherComponent />
    </ThemeProvider>
  );
};

```
npm package: @real-system/toaster
Description: Toast components for real system.
Author: Mike Wolf
Latest version: 0.0.51

<h1 align="center">@real-system/toaster</h1>
<p align="center">Toast components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/toaster"><img src="https://badgen.net/npm/v/@real-system/toaster?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/alert @real-system/animation-library @real-system/elements-primitive @real-system/styled-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/alert @real-system/animation-library @real-system/elements-primitive @real-system/styled-library @real-system/utils-library

# install toaster

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

### Code Example

```typescript
import { Toaster, useToast } from '@real-system/toaster';

export const MyComponent = (args) => {
  const toaster = useToaster();
  return (
    <Flex vertical>
      <Button
        mb={4}
        onClick={() => toaster.notify('12 new messages')}>
        Push Toast
      </Button>
      <Toaster {...toaster} />
    </Flex>
  );
};

```
npm package: @real-system/tooltip
Description: Tooltip component for real system.
Author: Mike Wolf
Latest version: 0.0.44

<h1 align="center">@real-system/tooltip</h1>
<p align="center">Tooltip component for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/tooltip"><img src="https://badgen.net/npm/v/@real-system/tooltip?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/styled-library @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/animation-library @real-system/styled-library @real-system/utils-library

# install tooltip

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

### Code Example

```typescript
import { Tooltip } from '@real-system/tooltip';

...

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

<h1 align="center">@real-system/tooltip-primitive</h1>
<p align="center">Tooltip primitive components for real system.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/tooltip-primitive"><img src="https://badgen.net/npm/v/@real-system/tooltip-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 tooltip-primitive

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

### Code Example

```typescript
import type {
  TooltipAnchorPrimitiveProps,
  TooltipArrowPrimitiveOptions,
  TooltipArrowPrimitiveProps,
  TooltipPrimitiveProps,
  TooltipStorePrimitive,
  TooltipStorePrimitiveProps,
} from '@real-system/tooltip-primitive';
import {
  TooltipAnchorPrimitive,
  TooltipArrowPrimitive,
  ATooltipPrimitive,
  useTooltipStorePrimitive,
} from '@real-system/tooltip-primitive';

...

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

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

## Usage

```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 truncate

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

### Code Example

```typescript
import { real } from '@real-system/elements-primitive';
import { Truncate } from '@real-system/truncate';
import { Text } from '@real-system/typography';

const MyComponent = (args) => (
  <real.div maxWidth="8rem">
    <Text>
      <Truncate title="Some extremely long text to truncate">
        Some extremely long text to truncate
      </Truncate>
    </Text>
  </real.div>
);
```
npm package: @real-system/types-library
Description: Types library for real system.
Author: Mike Wolf
Latest version: 0.0.6

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

## Usage

```bash
# install peer dependencies

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

# install types

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

### Code Example

```javascript
import type { ValueOf } from '@real-system/types-library';

const obj = {
  keyOne: 'one',
  keyTwo: 'two,
}
type Values = ValueOf<typeof obj>;
```
npm package: @real-system/typography
Description: Real System Typography components
Author: Mike Wolf
Latest version: 0.0.66

<h1 align="center">@real-system/typography</h1>
<p align="center">Real System's Typography components.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/typography"><img src="https://badgen.net/npm/v/@real-system/typography?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 typography

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

### Code Example

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

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <Text>Body text</Text>
      <Text.Base>Base (low-level) text</Text.Base>
      <Text.Code>Code text</Text.Code>
      <Text.Heading as="h2" size="h1">
        Heading text
      </Text.Heading>
      <Text.Help>Help text</Text.Help>
      <Text.Help variant="danger">Danger text</Text.Help>
      <Text.Help variant="warning">Warning text</Text.Help>
      <Text.Label>Label text</Text.Label>
      <Text width="50px">
        <Text.Truncate as="h1">
          Truncate long text to fit container
        </Text.Truncate>
      </Text>
    </RealSystemProvider>
  );
};
```
npm package: @real-system/utils
Description: utilities for real system
Author: Mike Wolf
Latest version: 0.0.11

<h1 align="center">@real-system/utils</h1>
<p align="center">Real System's series of javascript and typescript helpers.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/utils"><img src="https://badgen.net/npm/v/@real-system/utils?label=&icon=npm&color=blue" alt="npm version" height="18"/></a>
<a href="https://www.npmjs.com/package/@real-system/utils"><img src="https://badgen.net/bundlephobia/min/@real-system/utils" 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 utils

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

### Code Example

```javascript
import { ValueOf } from '@real-system/utils';

const obj = {
  keyOne: 'one',
  keyTwo: 'two,
}
type Values = ValueOf<typeof obj>;
// output: type Values = 'one' | 'two';
```
npm package: @real-system/utils-library
Description: utilities for real system
Author: Mike Wolf
Latest version: 0.0.37

<h1 align="center">@real-system/utils-library</h1>
<p align="center">Real System's series of javascript and typescript helpers.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/utils-library"><img src="https://badgen.net/npm/v/@real-system/utils-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 utils

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

### Code Example

```typescript
import { kebabCase } from '@real-system/utils-library';

const formatString = (name: Names) =>
  kebabCase(name);

formatString('JimSlim') // output: 'jim-slim'
```
npm package: @real-system/visually-hidden
Description: screen-reader-only component for real system
Author: Mike Wolf
Latest version: 0.0.61

<h1 align="center">@real-system/visually-hidden</h1>
<p align="center">Real System's screen-reader-only component.</p>
<p align="center">
<a href="https://www.npmjs.com/package/@real-system/theme-library"><img src="https://badgen.net/npm/v/@real-system/visually-hidden?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 visually-hidden

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

### Code Example

```jsx
import { RealSystemProvider } from '@real-system/styled-library';
import { VisuallyHidden } from '@real-system/visually-hidden';

const MyComponent = () => {
  return (
    <RealSystemProvider>
      <VisuallyHidden>Screen reader only text</VisuallyHidden>
    </RealSystemProvider>
  );
};
```