# @wedgekit/primitives

> Primitives are the building blocks of WedgeKit components. They are largely settings or wrapper components designed for keeping all WedgeKit components consistent in a composable and discoverable way.

Latest version **5.0.1** (published 2022-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wedgekit/primitives
pnpm add @wedgekit/primitives
yarn add @wedgekit/primitives
bun add @wedgekit/primitives
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2022-11-09 |
| First published | 2019-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lphipps, tmclnk, msuiter, rerskine, hpokharel, daniel.z, djkirlin, timmy2654, jfiller, dmsidevel, mada1113, hbiede.dmsi, bpowers_dmsi, jaradpiniarski, kolson, dreadman3716, jgreazel, zkerkman |

## Links

- npm: https://www.npmjs.com/package/@wedgekit/primitives
- Repository: https://design.dmsi.com/
- npm.io page: https://npm.io/package/@wedgekit/primitives

## Dependencies (1)

- [@wedgekit/color](https://npm.io/package/@wedgekit/color.md) 4.6.0

## Recent versions

- 5.0.1 (latest) — 2022-11-09
- 4.0.2-tc.10 (test) — 2022-10-17
- 1.3.0-rc.1 (beta) — 2019-07-29
- 5.0.0 — 2022-11-08
- 4.0.2-tc.7 — 2022-10-17
- 4.0.2-tc.6 — 2022-10-17
- 4.0.2-tc.5 — 2022-10-17
- 4.0.2-tc.4 — 2022-10-17
- 4.0.2-tc.3 — 2022-10-10
- 4.0.2-tc.2 — 2022-10-04
- 4.0.2-tc.1 — 2022-10-04
- 4.0.2-tc.0 — 2022-09-28
- 4.0.1-tc.2 — 2022-08-11
- 4.0.1-tc.1 — 2022-08-10
- 4.0.1-tc.0 — 2022-07-13
- … 72 more at https://npm.io/package/@wedgekit/primitives/versions

## README

# Primitives

Primitives are the building blocks of WedgeKit components. They are largely settings or wrapper components designed for keeping all WedgeKit components consistent in a composable and discoverable way.

## Usage

```typescript static
import settings from '@wedgekit/primitives';
```

## Settings

`@wedgekit/primitives` exports a settings object as its default export. These settings are intended to enforce consistency across `wedgekit` and A2W apps. The following settings are included in the settings object:

**animations**

transitions for `transform`, `box-shadow`, and `border` are included in `settings.animations`

**base**

base is a set number of pixels that all sizes in `wedgekit` and A2W apps should be based on; inspired by Evergreen UI's [major scale](https://evergreen.segment.com/foundations/layers#recommendation:_use_the_8px_major_scale_grid)

**border**

provides `width` and `radius` settings

**colors**

contains `status` color codes

**cursor**

the CSS styles for `disabled` and `readOnly`

**font**

`code` font settings

**fontFamily**

a CSS complaint `font-family` string

**fontSize**

provides sizes for the following:

- label
- link
- body
- bodySmall
- input
- tooltip
- h1
- h2
- h3
- h4
- h5
- h6

**fontWeight**

provides font-weights for `title`, `normal` & `link`

**tabIndex**

the tabIndex for `disabled` for those who strongly prefer package exports over extremely trivial code

**widths**

inexplicably the widths for `toast` and `multiselect-card` are in settings and not in their respective components

**zindex**

z-index values for `modal` and `header`

## Mixins

### BackgroundMixin

Background for form elements

#### Props

**disabled**

required: ❌

type: `boolean`

**invalid**

required: ❌

type: `boolean`

**readOnly**

required: ❌

type: `boolean`

### CursorMixin

Same... I think this is a cursor mixin for use with inputs.

#### Props

**disabled**

required: ❌

type: `boolean`

**invalid**

required: ❌

type: `boolean`

**readOnly**

required: ❌

type: `boolean`

### InputBorderMixin

I _know_ this one is for inputs.

**disabled**

required: ❌

type: `boolean`

**invalid**

required: ❌

type: `boolean`

**readOnly**

required: ❌

type: `boolean`

**status**

required: ❌

type: `'default' | 'error' | 'success' | 'pending'`

**wrapsGroup**

required: ❌

type: `boolean`

### InputFocusMixin

Wipes out existing browser styling(?)

### OptionMixin

a mixin for checkboxes and radio inputs which handles hover and focus-within styling

#### Props

**active**

required: ❌

type: `boolean`

**disabled**

required: ❌

type: `boolean`

### PopoverShadowMixin

It's a shadow mixin for popovers. Which is not in the popover package because it's so versatile.

#### Props

**disabled**

required: ❌

type: `boolean`

**invalid**

required: ❌

type: `boolean`

**status**

required: ❌

type: `'default' | 'error' | 'success' | 'pending'`

**readOnly**

required: ❌

type: `boolean`

**wrapsGroup**

required: ❌

type: `boolean`

### UpdatedInputMixin

It's updated, which is how you know its the right one. Unless there's an updatedUpdatedInputMixin of course, in which case please use that instead.

#### Props

**disabled**

required: ❌

type: `boolean`

**fullWidth**

required: ❌

type: `boolean`

**invalid**

required: ❌

type: `boolean`

**labelHidden**

required: ❌

type: `boolean`

**labelInline**

required: ❌

type: `boolean`

**status**

required: ❌

type: `'default' | 'error' | 'success' | 'pending'`

**readOnly**

required: ❌

type: `boolean`

## Animations

### withUpDown

`withUpDown` is a React [HOC](https://reactjs.org/docs/higher-order-components.html) which has a `direction` prop which can be set to `up` or `down`. It will transform the content 180 degrees when `direction` is `up`

---
_Source: https://npm.io/package/@wedgekit/primitives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._