open-index/open-npm huggingface dataset:
npm package: @smashing/alert
Description: Component used to give feedback to the user about an action or state.
Author: Eyedea AS
Latest version: 1.1.2

<p align="center">
  <img src="https://i.imgur.com/i0AZMKy.png" />
</p>

```sh
yarn add @smashing/alert
```

[![Edit alert](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/qvxn187xr4?fontsize=14)

#### Default appearance

![](https://i.imgur.com/aTOMmI5.png)

```jsx
<Alert title="Your account is active" />
<Alert title="Your account is active" intent="danger" />
<Alert title="Your account is active" intent="success" />
<Alert title="Your account is active" intent="warning" />
```

#### Card appearance

![](https://i.imgur.com/ZGi6w9e.png)

```jsx
<Alert title="Your account is active" appearance="card" />
<Alert title="Your account is active" appearance="card" intent="danger" />
<Alert title="Your account is active" appearance="card" intent="success" />
<Alert title="Your account is active" appearance="card" intent="warning" />
```

#### Inline appearance

![](https://i.imgur.com/vmXFlNm.png)

```jsx
<Alert title="Your account is active" appearance="inline" />
<Alert title="Your account is active" appearance="inline" intent="danger" />
<Alert title="Your account is active" appearance="inline" intent="success" />
<Alert title="Your account is active" appearance="inline" intent="warning" />
```

#### With description

![](https://i.imgur.com/8igOXGy.png)

```jsx
<Alert title="Your account is active">Lorem ipsum dolor sit amet.</Alert>
```

#### Without icon

![](https://i.imgur.com/jFJPWDW.png)

```jsx
<Alert title="Your account is active" hasIcon={false}>
  Lorem ipsum dolor sit amet.
</Alert>
```

#### Without trim(border)

![](https://i.imgur.com/NWX0EAL.png)

```jsx
<Alert title="Your account is active" hasTrim={false}>
  Lorem ipsum dolor sit amet.
</Alert>
```
npm package: @smashing/avatar
Description: Component used to represent users.
Author: Eyedea AS
Latest version: 1.2.0

<p align="center">
  <img src="https://i.imgur.com/JXxOMDT.png" />
</p>

```sh
yarn add @smashing/avatar
```

[![Edit avatar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/smashingavatar-yov92?fontsize=14)

#### Subtle(default) appearance

![](https://i.imgur.com/YjcCils.png)

```jsx
<Avatar name="Sasha Ho" />
```

#### Solid appearance

![](https://i.imgur.com/C9R6lGt.png)

```jsx
<Avatar name="Sasha Ho" appearance="solid" />
```

#### Size

![](https://i.imgur.com/KZqCakW.png)

```jsx
<Avatar name="Sasha Ho" size={64} />
```

#### With photo

![](https://i.imgur.com/m39Q4TY.png)

```jsx
<Avatar name="Sasha Ho" src="https://i.imgur.com/6EITnfO.png" />
```

#### Subtle colors

![](https://i.imgur.com/fuTL5xX.png)

```jsx
<Avatar name="Sasha Ho" color="blue" />
<Avatar name="Sasha Ho" color="green" />
<Avatar name="Sasha Ho" color="neutral" />
<Avatar name="Sasha Ho" color="orange" />
<Avatar name="Sasha Ho" color="purple" />
<Avatar name="Sasha Ho" color="red" />
<Avatar name="Sasha Ho" color="teal" />
<Avatar name="Sasha Ho" color="yellow" />
```

#### Solid colors

![](https://i.imgur.com/bGFCU8V.png)

```jsx
<Avatar name="Sasha Ho" color="blue" appearance="solid" />
<Avatar name="Sasha Ho" color="green" appearance="solid" />
<Avatar name="Sasha Ho" color="neutral" appearance="solid" />
<Avatar name="Sasha Ho" color="orange" appearance="solid" />
<Avatar name="Sasha Ho" color="purple" appearance="solid" />
<Avatar name="Sasha Ho" color="red" appearance="solid" />
<Avatar name="Sasha Ho" color="teal" appearance="solid" />
<Avatar name="Sasha Ho" color="yellow" appearance="solid" />
```

#### Colors based on hash value

![](https://i.imgur.com/eihWCEZ.png)

```jsx
<Avatar name="Anonymous User" hashValue="id-10" />
<Avatar name="Anonymous User" hashValue="id-20" />
<Avatar name="Anonymous User" hashValue="id-30" />
```

#### Stack

![](https://i.imgur.com/ph34WbX.png)

```jsx
<AvatarStack>
  <Avatar name="Anonymous User" hashValue="id-10" />
  <Avatar name="Anonymous User" hashValue="id-20" />
  <Avatar name="Anonymous User" hashValue="id-30" />
</AvatarStack>
```

#### Stack with limit

![](https://i.imgur.com/4yRQhfR.png)

```jsx
<AvatarStack limit={2}>
  <Avatar name="Anonymous User" hashValue="id-10" />
  <Avatar name="Anonymous User" hashValue="id-20" />
  <Avatar name="Anonymous User" hashValue="id-30" />
</AvatarStack>
```

#### Stack with limit and without show more

![](https://i.imgur.com/zScitHY.png)

```jsx
<AvatarStack limit={2} showMore={false}>
  <Avatar name="Anonymous User" hashValue="id-10" />
  <Avatar name="Anonymous User" hashValue="id-20" />
  <Avatar name="Anonymous User" hashValue="id-30" />
</AvatarStack>
```
npm package: @smashing/badge
Description: Component used to count notification
Author: Eyedea AS
Latest version: 1.0.2

```sh
yarn add @smashing/badge
```

### Badge

#### Default appearance

![](https://i.imgur.com/rg7O0Kv.png)

```jsx
<Badge color="Green">Green</Badge>
```

#### Solid appearance

![](https://i.imgur.com/y94zZDa.png)

```jsx
<Badge color="Green" isSolid>
  Green
</Badge>
```

### Pills

#### Default appearance

![](https://i.imgur.com/gIll110.png)

```jsx
<Pill color="red" marginLeft={8}>
  24
</Pill>
```

#### Solid appearance

![](https://i.imgur.com/keUuIat.png)

```jsx
<Pill color="green" marginLeft={8} appearance="solid">
  44
</Pill>
```
npm package: @smashing/build-utils
Description: Build scripts for smashing components
Author: Eyedea AS
Latest version: 0.1.7

# Smashing build utils

> Tools used to build smashing ui components

```sh
yarn add @smashing/build-utils
```

### Usage

Add as prepublish hook to package.json

```json
{
  "scripts": {
    "prepublish": "smashing-build"
  },
}
```
npm package: @smashing/button
Description: The Button component is the most common button component
Author: Eyedea AS
Latest version: 1.1.0

<p align="center">
  <img src="https://i.imgur.com/NA2c7cN.png" />
</p>

```sh
yarn add @smashing/button
```

[![Edit @smashing/button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/smashingbutton-o2iqd?fontsize=14)

#### Default appearance

![](https://i.imgur.com/M2KD67z.png)

```jsx
<Button>Default</Button>
<Button intent="info">Info</Button>
<Button intent="success">Success</Button>
<Button intent="warning">Warning</Button>
<Button intent="danger">Danger</Button>
```

#### Primary appearance

![](https://i.imgur.com/ZZgkXKX.png)

```jsx
<Button appearance="primary">Default</Button>
<Button appearance="primary" intent="info">
  Info
</Button>
<Button appearance="primary" intent="success">
  Success
</Button>
<Button appearance="primary" intent="warning">
  Warning
</Button>
<Button appearance="primary" intent="danger">
  Danger
</Button>
```

#### Subtle appearance

![](https://i.imgur.com/IOiH00F.png)

```jsx
<Button appearance="subtle">Default</Button>
<Button appearance="subtle" intent="info">
  Info
</Button>
<Button appearance="subtle" intent="success">
  Success
</Button>
<Button appearance="subtle" intent="warning">
  Warning
</Button>
<Button appearance="subtle" intent="danger">
  Danger
</Button>
```

#### Flat appearance

![](https://i.imgur.com/QgqtX1f.png)

```jsx
<Button appearance="flat">Default</Button>
<Button appearance="flat" intent="info">
  Info
</Button>
<Button appearance="flat" intent="success">
  Success
</Button>
<Button appearance="flat" intent="warning">
  Warning
</Button>
<Button appearance="flat" intent="danger">
  Danger
</Button>
```

#### Minimal appearance

![](https://i.imgur.com/45KNXcp.png)

```jsx
<Button appearance="minimal">Default</Button>
<Button appearance="minimal" intent="info">
  Info
</Button>
<Button appearance="minimal" intent="success">
  Success
</Button>
<Button appearance="minimal" intent="warning">
  Warning
</Button>
<Button appearance="minimal" intent="danger">
  Danger
</Button>
```

#### Height

![](https://i.imgur.com/sdVu2p1.png)

```jsx
<Button height={64}>Default</Button>
<Button height={48} intent="info">
  Info
</Button>
<Button height={32} intent="success">
  Success
</Button>
<Button height={24} intent="warning">
  Warning
</Button>
<Button height={20} intent="danger">
  Danger
</Button>
```

#### Border radius

![](https://i.imgur.com/cMNl7HP.png)

```jsx
<Button borderRadius={30}>Default</Button>
<Button borderRadius={30} intent="info">
  Info
</Button>
<Button borderRadius={30} intent="success">
  Success
</Button>
<Button borderRadius={30} intent="warning">
  Warning
</Button>
<Button borderRadius={30} intent="danger">
  Danger
</Button>
```
npm package: @smashing/charts
Description: Components used to represent various data.
Author: Eyedea AS
Latest version: 1.0.2



# Chart Components

**Simple charts components for data visualization**

```sh
yarn add @smashing/charts
```
## Usage

**Pie Chart**

<p align="center">
  <img src="https://imgur.com/VdUMbLi.png" />
</p>

Example Data

```jsx
const pieChartData = [
  {name: "USA", value: 60},
  {name: "UK", value: 20},
  {name: "Canada", value: 30},
  {name: "Mexico", value: 15},
  {name: "Japan", value: 10}
]
```
```jsx
<PieChart width={300} height={300} data={pieChartData} />
```

**Radial Progress Chart**

<p align="center">
  <img src="https://imgur.com/46rpIFy.png" />
</p>

```jsx

<RadialProgress
        width={200}
        height={200}
        data={40}
        description={"45 votes"}
      />
```
**Bar Chart**

<p align="center">
  <img src="https://imgur.com/P9Jbl45.png" />
</p>

Example Data

```jsx
const barChartData = [
  {value: 0.27, description: "5 votes"},
  {value: 0.63, description: "5 votes"},
  {value: 0.17, description: "5 votes"},
  {value: 0.55, description: "5 votes"},
  {value: 0.73, description: "5 votes"},
  {value: 0.13, description: "5 votes", isResult: true},
  {value: 0.68, description: "5 votes"},
  {value: 0.23, description: "5 votes"},
  {value: 0.36, description: "5 votes"},
  {value: 0.44, description: "5 votes"}
]
```
```jsx
<BarChart
        width={600}
        height={250}
        data={barChartData}
        titles={{left: "Serious 45%", right: "Playful 55%"}}
      />
```
**Spider Chart**

<p align="center">
  <img src="https://imgur.com/56dFNG6.png" />
</p>

Example Data

```jsx
const spiderChartData = {
  labels: ["Mass Appeal", "Rebel", "Friend", "Young", "Playful"],
  datasets: [
    {
      title: "BS",
      values: [5, 5, 5, 5, 5]
    },
    {
      title: "Votes",
      values: [2.5, 2.5, 2.5, 2.5, 2.5]
    }
  ]
}
```
```jsx
<SpiderChart width={500} data={spiderChartData} />
```

**Progress Bar Chart**

<p align="center">
  <img src="https://imgur.com/w8xaLFz.png" />
</p>

Example Data

```jsx

const progressBarData = [
  {option: "London", votes: 4},
  {option: "New York", votes: 14, isResult: true},
  {option: "Sydney", votes: 19},
  {option: "Paris", votes: 35},
  {option: "Beijing", votes: 87, isResult: true},
  {option: "New York", votes: 67},
  {option: "Sydney", votes: 76},
  {option: "Sydney", votes: 76},
  {option: "Paris", votes: 1, isResult: true}
]
```
```jsx
<ProgressBar width={600} data={progressBarData} />
```
npm package: @smashing/checkbox
Description: Simple Checkbox component
Author: Eyedea AS
Latest version: 1.2.0

# Checkbox

**The Checkbox component maps to a checkbox input and a label.**

```sh
yarn add @smashing/checkbox
```

### Primary appearance

###### Default

  <img src="https://imgur.com/wxECaWd.png" />

```jsx
<Checkbox>Stay signed in</Checkbox>
```

###### Checked

<img src="https://imgur.com/tmoWKu4.png" />

```jsx
<Checkbox checked>Stay signed in</Checkbox>
```

### Minimal appearance

###### Default

<img src="https://imgur.com/JSNIKP4.png" />

```jsx
<Checkbox appearance="minimal">Stay signed in</Checkbox>
```

###### Checked

<img src="https://imgur.com/yCHndLw.png" />

```jsx
<Checkbox appearance="minimal" checked>
  Stay signed in
</Checkbox>
```

### Disabled Button

###### Default

<img src="https://imgur.com/qdJi4hX.png" />

```jsx
<Checkbox disabled>Stay signed in</Checkbox>
```

###### Checked

<img src="https://imgur.com/ZkKxKg9.png" />

```jsx
<Checkbox disabled checked>
  Stay signed in
</Checkbox>
```

### Card appearance

###### Default

<img src="https://imgur.com/6YRxkR7.png" />

```jsx
<Checkbox appearance="card"> {icon} Stay signed in</Checkbox>
```

###### Checked

<img src="https://imgur.com/lUVdnbx.png" />

```jsx
<Checkbox appearance="card" checked>
  {icon}
  Stay signed in
</Checkbox>
```

###### Disabled

<img src="https://imgur.com/kdAopV7.png" />

```jsx
<Checkbox appearance="card" disabled>
  {icon}
  Stay signed in
</Checkbox>
```
npm package: @smashing/control-group
Description: Set of two or more buttons/radios/checkboxes with controlled value.
Author: Eyedea AS
Latest version: 1.0.8

<p align="center">
  <img src="https://i.imgur.com/Ud8aAT5.png" />
</p>

```sh
yarn add @smashing/control-group
```

#### Default usage

![](https://i.imgur.com/Ud8aAT5.png)

```jsx
const ReactComponent = () => {
  const [value, setValue] = React.useState(1)

  return (
    <ControlGroup
      controlAppearance="flat"
      groupAppearance="button"
      onChange={v => setValue(v)}
      value={value}
      items={[
        {
          label: 'first button',
          value: 1
        },
        {
          label: 'second button',
          value: 2
        }
      ]}
    />
  )
}
```
npm package: @smashing/css
Description: CSS utils: reset, normalize.
Author: Eyedea AS
Latest version: 1.0.1

```sh
yarn add @smashing/css
```

> CSS utils: reset to sane defaults, normalize across browsers.

```tsx
import {Reset, Normalize} from "@smashing/css"
import {createGlobalStyle} from "styled-components"

const App = () => (
  <div>
    <GlobalStyle />
    <Reset />
    <Normalize />
  </div>
)
```
npm package: @smashing/dialog
Description: Component is used to show content on top of an overlay. 
Author: Eyedea AS
Latest version: 1.0.2

<p align="center">
  <img src="https://i.imgur.com/bV99gA8.png" />
</p>

```sh
yarn add @smashing/dialog @smashing/button @smashing/portal
```

[![Edit @smashing/dialog](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/smashingdialog-inuzv?fontsize=14)

#### Basic example

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
>
  Hello world
</Dialog>
```

#### Header and Footer without borders

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  isFooterSeparated={false}
  isHeaderSeparated={false}
>
  Hello world
</Dialog>
```

#### Without Header and Footer

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  hasHeader={false}
  hasFooter={false}
>
  Hello world
</Dialog>
```

#### Without Cancel button

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  hasCancel={false}
>
  Hello world
</Dialog>
```

#### Customized Cancel and Confirm buttons

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  cancelAppearance="minimal"
  cancelLabel="Abort"
  confirmAppearance="flat"
  confirmLabel="Ok"
  intent="success"
>
  Hello world
</Dialog>

```

#### Disabled Confirm button

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  isConfirmDisabled
>
  Hello world
</Dialog>
```

#### Custom max width

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  width={700}
>
  Hello world
</Dialog>
```

#### Handle onCancel and onConfirm

```jsx
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
  isShown={isDialogVisible}
  title="Example"
  onCloseComplete={() => setIsDialogVisible()}
  onCancel={close => {
    console.log('cancel')
    close()
  }}
  onConfirm={close => {
    console.log('confirm')
    close()
  }}
>
  Hello world
</Dialog>
```
npm package: @smashing/figmator
Description: ## (part of Smashing toolbox)
Author: Eyedea AS
Latest version: 0.6.0

# Figmator

## (part of Smashing toolbox)

> **[View Storybook](https://github.com/eyedea-io/smashing-ui/deployments?environment=storybook#activity-log)**

## Getting started

**Install theme**

```sh
yarn add @smashing/theme
```

**Add Theme Provider**

```tsx
import { SmashingThemeProvider } from "@smashing/theme";

const App = () => <SmashingThemeProvider>{/* ... */}</SmashingThemeProvider>;
```

You can read more about [smashing theme provider](https://github.com/eyedea-io/smashing-ui/tree/master/packages/theme) to learn how to customize theme.

## Components

### Core

- **[Alert](https://github.com/eyedea-io/smashing-ui/tree/master/packages/alert)** - Component used to give feedback to the user about an action or state.
- **[Avatar](https://github.com/eyedea-io/smashing-ui/tree/master/packages/avatar)** - Component used to represent users.
- **[Button](https://github.com/eyedea-io/smashing-ui/tree/master/packages/button)** - Common button component
- **[Dialog](https://github.com/eyedea-io/smashing-ui/tree/master/packages/dialog)** - Component is used to show content on top of an overlay.
- **[Menu](https://github.com/eyedea-io/smashing-ui/tree/master/packages/menu)** - Multiple components that help create menus.
- **[Popover](https://github.com/eyedea-io/smashing-ui/tree/master/packages/popover)** - Component displays floating content in relation to a target.
- **[Select](https://github.com/eyedea-io/smashing-ui/tree/master/packages/select)** - Simple select component being an overlay to a default system one.
- **[TextInput](https://github.com/eyedea-io/smashing-ui/tree/master/packages/text-input)** - Text input component used in forms.
- **[Tooltip](https://github.com/eyedea-io/smashing-ui/tree/master/packages/tooltip)** - Component used to describe icon buttons.

### Typography

- **[Text](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Inline text component.
- **[Strong](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Bold variant of Text component.
- **[Paragraph](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Component used for bigger chunks of texts.
- **[Heading](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Component used for article and section titles.
- **[Label](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Component used to describe form inputs.

### Functional

- **[Head](https://github.com/eyedea-io/smashing-ui/tree/master/packages/head)** - Manage page `<head>` tag content.
- **[Title](https://github.com/eyedea-io/smashing-ui/tree/master/packages/title)** - Manage page `<title>` tag content.
- **[css](https://github.com/eyedea-io/smashing-ui/tree/master/packages/css)** - Global css styles - normalize.css and reset.
npm package: @smashing/form-field
Description: Component used for to add label, description, hint and error handling to input.
Author: Eyedea AS
Latest version: 1.1.5

```sh
yarn add @smashing/form-field @smashing/form mobx-react-lite mobx
```

#### Basic example

> `FormField` must be wrapped in `Form` component.

```tsx
import {useForm} from '@smashing/form'
import {FormField} from '@smashing/form-field'
import {TextInput} from '@smashing/text-input'

const App = () => {
  const {Form} = useForm({
    initialValues: {
      email: ''
    }
  })

  return (
    <Form>
      <FormField
        name="email"
        label="Your email"
        placeholder="Type your email..."
        component={TextInput}
      />
    </Form>
  )
}
```

#### With description

```tsx
<Form>
  <FormField
    name="email"
    label="Your email"
    placeholder="Type your email..."
    description="Lorem ipsum dolor sit ament"
    component={TextInput}
  />
</Form>
```

#### With custom description

```tsx
<Form>
  <FormField
    name="email"
    label="Your email"
    placeholder="Type your email..."
    description={<div>Lorem ipsum dolor sit ament</div>}
    component={TextInput}
  />
</Form>
```

#### With hint

```tsx
<Form>
  <FormField
    name="email"
    label="Your email"
    placeholder="Type your email..."
    hint="Lorem ipsum dolor sit ament"
    component={TextInput}
  />
</Form>
```

#### With custom hint

```tsx
<Form>
  <FormField
    name="email"
    label="Your email"
    placeholder="Type your email..."
    hint={<div>Lorem ipsum dolor sit ament</div>}
    component={TextInput}
  />
</Form>
```

#### Inline label

```tsx
<Form>
  <section style={{'--label-column-width': 200}}>
    <FormField name="firstName" labelAppearance="inline" label="firstName" />
    <FormField name="lastName" labelAppearance="inline" label="lastName" />
  </section>
  <section style={{'--label-column-width': 150}}>
    <FormField name="firstName" labelAppearance="inline" label="firstName" />
    <FormField name="lastName" labelAppearance="inline" label="lastName" />
  </section>
</Form>
```
npm package: @smashing/head
Description: Manage page head
Author: Eyedea AS
Latest version: 1.0.1

# Head

> Manage page head content. Add meta, link, title, style tags to page head.

```sh
yarn add @smashing/head
```

### Usage

```jsx
import {Head} from "@smashing/head"

export const AboutPage = () => (
  <div>
    <Head>
      <title>About us</title>
      <meta property="og:title" content="About us" />
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico" />
    </Head>
  </div>
)
```
npm package: @smashing/list
Description: Component is used to display a list.
Author: Eyedea AS
Latest version: 1.0.1

```sh
yarn add @smashing/list
```

#### Basic example

```jsx
<List overlapSize={60}>
  <div>Child element</div>
  <div>Child element</div>
  <div>Child element</div>
</List>
```
npm package: @smashing/portal
Description: Component utility to help with the ReactDOM.createPortal API.
Author: Eyedea AS
Latest version: 1.0.1

<p align="center">
  <img src="https://i.imgur.com/49llvEI.png" />
</p>

```sh
yarn add @smashing/portal
```

## Usage

```jsx
import {Portal} from "@smashing/portal"

export default () => (
  <div>
    App content...
    <Portal>Content moved outside of react tree.</Portal>
  </div>
)
```
npm package: @smashing/positioner
Description: Component utility to help with the ReactDOM.createstack API.
Author: Eyedea AS
Latest version: 1.0.1

<p align="center">
  <img src="https://i.imgur.com/49llvEI.png" />
</p>

```sh
yarn add @smashing/portal
```

## Usage

```jsx
import {Portal} from '@smashing/portal'

export default () => (
  <div>
    App content...

    <Portal>
      Content moved outside of react tree
    </Portal>
  </div>
)
```
npm package: @smashing/select
Description: Component used to select options
Author: Eyedea AS
Latest version: 1.1.0

```sh
yarn add @smashing/select
```

#### Default appearance

![](https://i.imgur.com/qyYFWJd.png)
![](https://i.imgur.com/zWbnORu.png)

```jsx
<Select
  options={['a', 'b', 'c', 'd'].map(value => ({label: value, value}))}
  selected="b"
  onChange={value => {}}
/>
```

#### Modyfing height

![](https://i.imgur.com/vWvvtZp.png)

```jsx
<Select options={/*...*/} height={64} />
```

#### Different appearances and intents

![](https://i.imgur.com/E8nr1oR.png)

```jsx
<Select options={/*...*/} appearance="primary" intent="danger" />
<Select options={/*...*/} appearance="primary" intent="info" />
<Select options={/*...*/} appearance="flat" intent="warning" />
```

#### Full width

![](https://i.imgur.com/SXGHtrY.png)

```jsx
<Select options={/*...*/} full />
```
npm package: @smashing/select-menu
Description: Component used to select options
Author: Eyedea AS
Latest version: 1.1.0

# Select Menu

```sh
yarn add @smashing/select-menu
```

#### Default appearance

![](https://imgur.com/MNE4ssC.png)

```jsx
<SelectMenu
  options={options}
  value={singleSelectedOption}
  onSelect={changeSingleSelectedOption}
  hasFilter
  hasTitle
  title="Select Item"
/>
```

#### Card appearance

![](https://imgur.com/lmPXkOA.png)

```jsx
<SelectMenu
  options={options}
  value={singleSelectedOption}
  onSelect={changeSingleSelectedOption}
  appearance="card"
  hasFilter
/>
```

#### Minimal appearance and multiselect option

![](https://imgur.com/iklqhSG.png)

```jsx
<SelectMenu
  options={options}
  value={selectedOptions}
  placeholderForMultipleSelected={selected => `Items: ${selected.length}`}
  onSelect={select}
  onDeselect={deselect}
  appearance="minimal"
/>
```

#### Custom select menu

![](https://imgur.com/UJlSHVp.png)

```jsx
<SelectMenu
  options={options}
  value={selectedOptions}
  onSelect={select}
  onDeselect={deselect}
  appearance="primary"
  renderItem={(option, click, options, selected) => {
    return (
      <div key={option.value}>
        <Button onClick={click}>{option.label} </Button>
      </div>
    )
  }}
  children={props => (
    <Button ref={props.getRef} onClick={props.toggle}>
      Select
    </Button>
  )}
/>
```

#### Change the height and width

```jsx
<SelectMenu
  width={100}
  height={100}
  options={options}
  value={singleSelectedOption}
  onSelect={changeSingleSelectedOption}
/>
```

### Remove title and filter

- `hasFilter={false}`: to remove the search input filter.
- `hasTitle={false}`: to remove the title from the popover.
npm package: @smashing/side-sheet
Description: Component used to show a panel attached to the edge of the screen.
Author: Eyedea AS
Latest version: 1.0.2

# Side Sheet

```sh
yarn add @smashing/side-sheet
```
#### Basic example

<!-- TODO: add pictures  -->

```jsx
    <Wrapper>
      {({setIsShown, isShown}) => (
        <SideSheet
              isShown={isShown}
              onCloseComplete={() => setIsShown(false)}
              containerProps={{
                display: 'flex',
                flex: '1',
                flexDirection: 'column'
              }}
            > Hello World!</SideSheet>
      )}
    </Wrapper>
```

#### Change position


```jsx
    <Wrapper>
      {({setIsShown, isShown}) => (
        <SideSheet
              isShown={isShown}
              onCloseComplete={() => setIsShown(false)}
              position='top'
              containerProps={{
                display: 'flex',
                flex: '1',
                flexDirection: 'column'
              }}
            > Hello World!</SideSheet>
      )}
    </Wrapper>
```

#### Hide closing button


```jsx
    <Wrapper>
      {({setIsShown, isShown}) => (
        <SideSheet
              isShown={isShown}
              onCloseComplete={() => setIsShown(false)}
              isClosingButtonVisible={false}
              containerProps={{
                display: 'flex',
                flex: '1',
                flexDirection: 'column'
              }}
            > Hello World!</SideSheet>
      )}
    </Wrapper>
```
npm package: @smashing/spinner
Description: Component used to indicate a loading state.
Author: Eyedea AS
Latest version: 1.0.2


# Spinner

**The Spinner component is used to indicate a loading state.**

```sh
yarn add @smashing/spinner
```

#### Basic usage
<img src="https://imgur.com/FVYK5CU.gif" />

```jsx
<Spinner />
```

### Change the size
<img src="https://imgur.com/fQH51Tm.gif" />

```jsx
<Spinner size={24} />
```

### Change the color
<img src="https://imgur.com/rpUq5au.gif" />

```jsx
<Spinner color="lightblue" />
```

### Set the delay
<img src="https://imgur.com/nCxoRAN.gif" />

```jsx
<Spinner delay={2000} />
```
npm package: @smashing/tabs
Description: Component is used to create tab list.
Author: Eyedea AS
Latest version: 1.0.1

```sh
yarn add @smashing/tabs
```

#### Basic example

```jsx
<Tablist appearance="flat">
  <Tab isSelected appearance="flat">
    Tab 1
  </Tab>
  <Tab>Tab 2</Tab>
  <Tab>Tab 3</Tab>
</Tablist>
```
npm package: @smashing/theme
Description: Theme configuration for smashing components
Author: Eyedea AS
Latest version: 0.15.0

# Theme

> Theme configuration for smashing components

```sh
yarn add @smashing/theme
```

### Customizing theme

You can override theme values using `SmashingThemeProvider`. Use typescript autocomplete to see theme schema.

```jsx
import {SmashingThemeProvider, createTheme} from '@smashing/theme'

const baseTheme = createTheme({
  defaults: {
    button: {
      appearance: 'flat',
      height: 40
    }
  },
  fontFamilies: {
    ui: 'arial',
    display: 'Roboto'
  }
})

const App = () => (
  <SmashingThemeProvider theme={baseTheme}>{/* ... */}</SmashingThemeProvider>
)
```

### Theme modifiers (dark mode)

You can change theme for parts of your app using `SmashingThemeModifier`. It will take global smashing theme and overwrite it with values provided in `theme` prop.

```tsx
import {
  SmashingThemeProvider,
  SmashingThemeModifier,
  createTheme
} from '@smashing/theme'

const baseTheme = createTheme({
  colors: {
    heading: {
      default: '#666666'
    }
  }
})

const darkTheme = createTheme({
  colors: {
    heading: {
      default: '#fff'
    }
  }
})

const App = () => (
  <SmashingThemeProvider theme={baseTheme}>
    {/* ... somewhere deep in your app */}
    <SmashingThemeModifier theme={darkTheme}>
      <Heading>I'm light</Heading>
    </SmashingThemeModifier>
    {/* ... */}
  </SmashingThemeProvider>
)
```

You can make a wrapper component for your theme:

```tsx
const DarkTheme = props => (
  <SmashingThemeModifier
    theme={{
      colors: {
        text: {
          muted: '#7887A0',
          default: '#CDD4E3',
          intense: '#FFFFFF',
          success: '#00E074',
          warning: '#E88C32',
          danger: '#FF3730',
          info: '#2998FF'
        }
      }
    }}
    {...props}
  />
)
```

and use it:

```tsx
<DarkTheme>
  <Header>Title</Header>
  <Header color="muted">Meta data...</Header>
</DarkTheme>
```
npm package: @smashing/title
Description: Manage page title
Author: Eyedea AS
Latest version: 1.0.1

# Title

> Manage page title with React component.

```sh
yarn add @smashing/title
```

### Change page title

This will set page title to `About`. If app title is configured, it will be set to `About - App Title`

```jsx
import {Title} from "@smashing/title"

export const AboutPage = () => (
  <div>
    <Title>About</Title>
  </div>
)
```

### Setup app title and separator

```jsx
import {TitleContext} from "@smashing/title"

export const App = () => (
  <TitleContext.Provider
    value={{
      title: 'My App Name',
      separator: ' - '
    }}
  >
    {/* ... */}
  </TitleContext.Provider>
)
```
npm package: @smashing/toaster
Description: Component used for notifications
Author: Eyedea AS
Latest version: 1.0.5

```sh
yarn add @smashing/toaster
```

#### Default appearance

![](https://i.imgur.com/EKVBhP2.png)

```jsx
<Button onClick={() => toaster.success('Successful alert!')}>Success</Button>
```

#### With Description

![](https://i.imgur.com/tQVxSot.png)

```jsx
<Button
  onClick={() =>
    toaster.success('Successful alert!', {description: 'Hello World!'})
  }
/>
```

#### With custom duration

```jsx
<Button onClick={() => toaster.success('Successful alert!', {duration: 5})}>
  Success 5s
</Button>
```

#### Close all toasters

```jsx
<Button onClick={toaster.closeAll}>Close all</Button>
```

#### Unique toast

```jsx
<Button
  onClick={() =>
    toaster.success('Only one toaster will be shown', {id: 'forbidden-action'})
  }
>
  Success
</Button>
```
npm package: @smashing/typography
Description: Typography components
Author: Eyedea AS
Latest version: 1.1.0

# Typography

> Typography components

```sh
yarn add @smashing/typography
```

### Text (span)

```jsx
<Text>I'm inline text</Text>
<Text color="muted">I'm inline text</Text>
<Text color="default">I'm inline text</Text>
<Text color="intense">I'm inline text</Text>
<Text intent="danger">I'm inline text</Text>
<Text intent="warning">I'm inline text</Text>
<Text intent="info">I'm inline text</Text>
<Text intent="success">I'm inline text</Text>
<Text size={300}>I'm inline text</Text>
<Text size={400}>I'm inline text</Text>
<Text size={500}>I'm inline text</Text>
<Text size={600}>I'm inline text</Text>
```

### Heading (h2)

```jsx
<Heading>I'm a heading</Heading>
<Heading as="h1" size={100}>I'm a heading</Heading>
<Heading as="h6" size={200}>I'm a heading</Heading>
<Heading size={300}>I'm a heading</Heading>
<Heading size={400}>I'm a heading</Heading>
<Heading size={500}>I'm a heading</Heading>
<Heading size={600}>I'm a heading</Heading>
<Heading size={700}>I'm a heading</Heading>
<Heading size={800}>I'm a heading</Heading>
<Heading size={900}>I'm a heading</Heading>
```

### Paragraph (p)

```jsx
<Paragraph>I'm a paragraph</Paragraph>
<Paragraph size={300}>I'm a paragraph</Paragraph>
<Paragraph size={400}>I'm a paragraph</Paragraph>
<Paragraph size={500}>I'm a paragraph</Paragraph>
<Paragraph size={600}>I'm a paragraph</Paragraph>
```

### Strong (strong)

```jsx
<Strong>I'm a strong tag</Strong>
<Strong size={300}>I'm a strong tag</Strong>
<Strong size={400}>I'm a strong tag</Strong>
<Strong size={500}>I'm a strong tag</Strong>
<Strong size={600}>I'm a strong tag</Strong>
```