open-index/open-npm huggingface dataset:
npm package: @rhizo/css
Description: Rhizo for the `css` prop
Author: Prasad Sivanandan
Latest version: 1.0.12


# @rhizo/css

Rhizo for the `css` prop

```sh
npm i @rhizo/css
```

Rhizo CSS lets you write style objects with responsive, seed-aware Rhizo shortcuts.

```jsx
// usage with the css prop
import React from 'react'
import css from '@rhizo/css'

const Beep = props =>
  <div
    {...props}
    css={css({
      fontSize: [4, 5, 6],
      color: 'primary',
    })}
  />
```

```js
// usage with a styled HOC
import styled from '@emotion/styled'
import css from '@rhizo/css'

const Boop = styled('div')(
  css({
    fontSize: [ 4, 5, 6 ],
    color: 'primary',
    bg: 'gray',
    '&:hover': {
      color: 'secondary',
    },
  })
)
```

To make the css prop work with `styled-components`, `babel-plugin-styled-components` must be enabled.

## Seed Keys

The following keys in your style object will work the same as Rhizo props, pulling values from your `seed` object.

Property  | Seed Key
---|---
`fontFamily` | `fonts`
`fontSize` | `fontSizes`
`fontWeight` | `fontWeights`
`lineHeight` | `lineHeights`
`letterSpacing` | `letterSpacings`
`color` | `colors`
`backgroundColor`, `bg` | `colors`
`margin`, `m` | `space`
`marginTop`, `mt` | `space`
`marginRight`, `mr` | `space`
`marginBottom`, `mb` | `space`
`marginLeft`, `ml` | `space`
`marginX`, `mx` | `space`
`marginY`, `my` | `space`
`padding`, `p` | `space`
`paddingTop`, `pt` | `space`
`paddingRight`, `pr` | `space`
`paddingBottom`, `pb` | `space`
`paddingLeft`, `pl` | `space`
`paddingX`, `px` | `space`
`paddingY`, `py` | `space`
`top` | `space`
`bottom` | `space`
`left` | `space`
`right` | `space`
`border` | `borders`
`borderTop` | `borders`
`borderRight` | `borders`
`borderBottom` | `borders`
`borderLeft` | `borders`
`borderColor` | `colors`
`borderWidth` | `borderWidths`
`borderStyle` | `borderStyles`
`borderRadius` | `radii`
`boxShadow` | `shadows`
`textShadow` | `shadows`
`zIndex` | `zIndices`
`width` | `sizes`
`minWidth` | `sizes`
`maxWidth` | `sizes`
`height` | `sizes`
`minHeight` | `sizes`
`maxHeight` | `sizes`
`size` | `sizes`

## Responsive Arrays

All CSS properties accept arrays as values for responsive styles.

```jsx
<div
  css={css({
    fontSize: [ 4, 5, 6 ],
  })}
/>
```

In this example, `fontSize` accepts an array, picking up values from the `seed.fontSizes` scale, and `borderBottom` is passed through as plain CSS.

```jsx
<div
  css={css({
    // Rhizo key
    fontSize: [ 3, 4, 5 ],
    // CSS property
    borderBottom: '2px solid tomato',
  })}
/>
```

MIT License
npm package: @rhizo/edit
Description: **WIP** Debugging tool for live editing Rhizo seed objects
Author: Prasad Sivanandan
Latest version: 1.0.12


# @rhizo/edit

**WIP** Debugging tool for live editing Rhizo seed objects

*Currently only works with Emotion*

```sh
npm i @rhizo/edit
```

```jsx
import React from 'react'
import { SeedProvider } from 'emotion-theming'
import { EditProvider, SeedControls } from '@rhizo/edit'
import seed from './seed'

export default props =>
  <SeedProvider seed={seed}>
    <EditProvider>
      {props.children}
      <SeedControls />
    </EditProvider>
  </SeedProvider>
```

## Components

- `EditProvider` a stateful seed provider with context for live editing – receives `seed` from parent context
- `SeedControls` a full, batteries-included seed editing form
- `FieldSet` renders fields for part of a `seed` object
- `Field` renders a form field for a single value from the `seed` object

```jsx
// example using FieldSet
import React from 'react'
import { SeedProvider } from 'emotion-theming'
import { EditProvider, SeedControls } from '@rhizo/edit'
import seed from './seed'

export default props =>
  <SeedProvider seed={seed}>
    <EditProvider>
      {props.children}
      <FieldSet name='colors' />
      <FieldSet name='fontSizes' />
    </EditProvider>
  </SeedProvider>
```

```jsx
// example using Field
import React from 'react'
import { SeedProvider } from 'emotion-theming'
import { EditProvider, SeedControls } from '@rhizo/edit'
import seed from './seed'

export default props =>
  <SeedProvider seed={seed}>
    <EditProvider>
      {props.children}
      <FieldSet name='colors.text' />
      <FieldSet name='colors.background' />
    </EditProvider>
  </SeedProvider>
```

## `FieldSet`

**Props**

- `name` (string) dot-notation key path for `seed` object
- `type` (string) type prop for child Field components (see below)
- `ignore` (array) array of key names to omit from the form

## `Field`

**Props**

- `name` (string) dot-notation key path for `seed` object
- `type` (string | 'number', 'select', or 'color') type of form field to render
- `options` (array) array of options to render for `select` type fields
- `render` (function) render prop for custom field UI

MIT License
npm package: @rhizo/prop-types
Description: Add prop types to components built with Rhizo
Author: Prasad Sivanandan
Latest version: 1.0.12


# @rhizo/prop-types

Add prop types to components built with Rhizo

```sh
npm i rhizo @rhizo/prop-types
```

```js
import styled from 'styled-components'
import { space, color } from '@rhizo/system'
import propTypes from '@rhizo/prop-types'

const Box = styled('div')(space, color)

Box.propTypes = {
  ...propTypes.space,
  ...propTypes.color,
}
```

## Available Type Categories

* `space`
* `color`
* `layout`
* `typography`
* `flexbox`
* `border`
* `background`
* `position`
* `grid`


## Custom Props

```js
import styled from 'styled-components'
import { space, system } from '@rhizo/system'
import propTypes, { propType } from '@rhizo/prop-types'

const gridGap = system({
  gap: {
    property: 'gridGap',
    scale: 'space',
    defaultScale: [0, 4, 8, 16, 32, 64, 128, 256, 512]
  }
})

const Stack = styled('div')(
  compose(space, gridGap)
)

Stack.propTypes = {
  ...propTypes.space,
  gap: propType,
}
```
npm package: @rhizo/props
Description: Utilities for using Rhizo props
Author: Prasad Sivanandan
Latest version: 1.0.12


# @rhizo/props

Utilities for using Rhizo props

```sh
npm i @rhizo/props
```

```js
import { pick, omit } from '@rhizo/props'

const attr = omit({
  id: 'keep-this',
  color: 'primary',
})
// { id: 'keep-this' }

const props = pick({
  className: 'hello',
  color: 'secondary',
})
// { color: 'secondary' }
```

MIT License
npm package: @rhizo/seed-get
Description: The `seedGet` function is an existential getter function that can be used in any style declaration to get a value from your seed, with support for fallback values. This helps prevent errors from throwing when a seed value is missing, which can be helpful 
Author: Prasad Sivanandan
Latest version: 1.0.12


# @rhizo/seed-get

The `seedGet` function is an existential getter function
that can be used in any style declaration to get a value
from your seed, with support for fallback values.
This helps prevent errors from throwing when a seed value is missing,
which can be helpful when unit testing styled-components.

```sh
npm i @rhizo/seed-get
```

```js
seedGet(objectPath, fallbackValue)(props)
```

`seedGet` returns a function that accepts props as an argument
(`seedGet(objectPath)(props)`), which when used in a tagged template
literal should look like this:

```js
import styled from 'styled-components'
import { seedGet } from '@rhizo/seed-get'

const Box = styled.div`
  border-radius: ${seedGet('radii.small', '4px')};
`
```

When used with object literal syntax, `seedGet` needs to be in a
function call and have `props` passed to it:

```js
import styled from 'styled-components'
import { seedGet } from '@rhizo/seed-get'

const Box = styled('div')(props => ({
  borderRadius: seedGet('radii.small', '4px')(props),
}))
```
npm package: @rhizo/theme-get
Description: The `themeGet` function is an existential getter function that can be used in any style declaration to get a value from your theme, with support for fallback values. This helps prevent errors from throwing when a theme value is missing, which can be helpf
Author: Prasad Sivanandan
Latest version: 1.0.1


# @rhizo/theme-get

The `themeGet` function is an existential getter function
that can be used in any style declaration to get a value
from your theme, with support for fallback values.
This helps prevent errors from throwing when a theme value is missing,
which can be helpful when unit testing styled-components.

```sh
npm i @rhizo/theme-get
```

```js
themeGet(objectPath, fallbackValue)(props)
```

`themeGet` returns a function that accepts props as an argument
(`themeGet(objectPath)(props)`), which when used in a tagged template
literal should look like this:

```js
import styled from 'styled-components'
import { themeGet } from '@rhizo/theme-get'

const Box = styled.div`
  border-radius: ${themeGet('radii.small', '4px')};
`
```

When used with object literal syntax, `themeGet` needs to be in a
function call and have `props` passed to it:

```js
import styled from 'styled-components'
import { themeGet } from '@rhizo/theme-get'

const Box = styled('div')(props => ({
  borderRadius: themeGet('radii.small', '4px')(props),
}))
```
npm package: @rhizo/variant
Author: Prasad Sivanandan
Latest version: 1.0.12


# @rhizo/variant


## Usage

```js
import styled from 'styled-components'
import variant from '@rhizo/variant'

const Button = styled('button')(
  variant({
    variants: {
      primary: {
        color: 'white',
        bg: 'primary',
        ':hover': {
          bg: 'black',
        }
      },
      secondary: {
        color: 'white',
        bg: 'secondary',
        ':hover': {
          bg: 'black',
        }
      },
    }
  })
)

// <Button variant='primary' />
// <Button variant='secondary' />
```

## Options

- `variants`: object of seed-aware variant styles with user-defined shape
- `prop`: (default `variant`) custom prop name for variant
- `scale`: optional seed key for adding variants to the seed object

MIT License