npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wedgekit/primitives

v5.0.1

Published

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.

Downloads

66

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

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

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 which has a direction prop which can be set to up or down. It will transform the content 180 degrees when direction is up