{"ava":{"babel":"inherit","require":["babel-register"]},"dist":{"shasum":"21b4c7cf63c5b41d3f22d28ddc2cac4c85bf3d2f","tarball":"https://registry.npmjs.org/system-components/-/system-components-2.1.0-0.tgz","fileCount":12,"integrity":"sha512-uN4RFxbzWwI93HblDKl4ESLYiGxVmgpxJH+ANJPi5JsGtAhEg5NvU1a5uK4agc+FP4haH6noQFNoWpaSmLKx6Q==","signatures":[{"sig":"MEYCIQClv+KCpfEbIg8Bz/fdGSBYz+HelKjA6k7B55BOfKHnWgIhALF3aOVOPKyAHT1Ch+VCs2xp5oINf+NSwPj1mA0zCg2h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJTgaCRA9TVsSAnZWagAAAncP/RJl8LWeUnNGJRiQUwNf\nUYMv/8NolxlldIk/GbX1NmXvQP9iMqnAzbdgVh699J+CYPspbKhszV4Cmwpy\n2/oLbGklxsLHhXaZz6P5+jggMijDyZdBZkwywhfSfh0aoDXyVMYtrDvBsrb3\nLQyyBg4XtJu9qMMhzkxQf2VGfwqI5j0+WioAHnDfOIvPBfNeVOv6fZJxa+sd\novecd/E1NkXj0ChzBsm9kYOpPoLA/Rp3LHzqPzwlzVcqGXDVHcwTLvT/+VAn\nooA7YBPJWTFwZaQi8ZyHt0840UAVTt7FpLV3cve4Rvrv59p5Fqgh8faKdHWE\nhLJYL0UDT0U6AYxsqK+1ik+BR955TQWX+9OUsU4Xg+AoXPL+dUZsGazHxoUZ\nRnHUh4AOTHvhR7qZJvFirzNQOBxyM0w4C6eldHLRVvinEIt2U0yJlLN3xmhy\npHuztDhtglBYhahh1WO7yt/sI/8zPSwAlFxZ12Gsukp/omrcbM3BAzvOIkGZ\na/htL7SPRW/189aPSKA4Pvj6TpazxrQBy3l6aobMHsiwXVix55XhzwUOapsC\n/nYA0PXjvy8WQZabJIAP9N4fnyljwz0JjAtmsRe+m+TrLHkJYpPZbKGJez8c\naOyUq+F9Qv3A0VfB9ZLLrmzmwabP4xIXVnQq1u8mRhry5s9v/jfdU9h54ei2\nlYHo\r\n=f0AR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","name":"system-components","author":{"name":"Brent Jackson"},"readme":"\n# system-components\n\nCreate consistent design-system-driven React UI components\n\nBuilt with [styled-system][sys],\nwith support for [styled-components][sc] & [emotion][emotion]\n\n[![Build Status][build-badge]][build]\n\n[build-badge]: https://img.shields.io/travis/jxnblk/system-components/master.svg?style=flat-square\n[build]: https://travis-ci.org/jxnblk/system-components\n\n```js\nimport system from 'system-components'\n\n// creates a Box with default props tied to your theme\nconst Box = system({\n  p: 2,\n  bg: 'blue'\n})\n```\n\nOr, to use with [emotion][emotion]:\n\n```js\nimport system from 'system-components/emotion'\n```\n\n## Usage\n\nTo create a styled-component with default props that hook into [styled-system][sys] props, pass a plain object as the first argument to the `system` function.\n\n```js\nconst Card = system({\n  px: 2,\n  py: 3,\n  borderWidth: 1,\n  borderColor: 'lightGray',\n  borderRadius: 2\n})\n```\n\nThe system function will automatically apply [styled-system][sys] functions\nto the underlying styled-component based on the keys of the `defaultProps` object.\nSystem components also add prop type definitions and remove style props from the underlying HTML element.\n\nSee the [styled-system docs][sys] for a complete list of the available style functions.\n\n### Add style props without defaultProps\n\nSystem components can also be created with [styled-system][sys] props without defining `defaultProps`.\n\n```js\nconst Box = system(\n  'space',\n  'width',\n  'color'\n)\n```\n\nThis allows for style props to be passed to the component instance:\n\n```jsx\n<Box\n  width={1/2}\n  px={3}\n  py={4}\n  bg='blue'\n/>\n```\n\n### Using custom functions\n\nCustom style functions can be passed as an argument.\n\n```js\nconst Box = system(\n  props => ({\n    height: props.height\n  })\n)\n```\n\n### Changing the underlying HTML element\n\nSystem components default to using a `<div>` as the HTML element.\nTo change the HTML element use the `is` prop.\n\n```js\nconst Heading = system({\n  is: 'h2',\n  m: 0,\n  fontSize: 6\n})\n```\n\nSince `is` is a prop, it can also be passed to the element when used.\nThis is useful for one-off changes to ensure semantic markup.\n\n```js\n<Heading is='h1'>\n  Hello\n</Heading>\n```\n\n### Extending components\n\nSystem components are styled-components, so any of the\n[built-in methods](https://www.styled-components.com/docs/api#styledcomponent)\nwork as expected, including `.extend`.\n\n```js\nconst Text = system({\n  fontSize: 2,\n})\n\nconst Bold = Text.extend`\n  font-weight: bold;\n`\n```\n\n## Using with other CSS-in-JS libraries\n\nThe base `System` class can be used to create a system-components function for any CSS-in-JS library.\n\n```js\nimport { System } from 'system-components'\nimport cxs from 'cxs/component'\n\nconst system = new System({\n  createComponent: type => (...args) => cxs(type)(...args)\n})\n\nexport default system\n```\n\n---\n\n[MIT License](License.md)\n\n[sys]: https://github.com/jxnblk/styled-system\n[sc]: https://github.com/styled-components/styled-components\n[emotion]: https://github.com/emotion-js/emotion\n","license":"MIT","scripts":{"test":"nyc ava","cover":"nyc report --reporter=html --reporter=lcov","prepublishOnly":"babel src -d dist"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"keywords":["react","components","styled-system","styled-components","emotion","design-system","theme","css-in-js"],"_npmVersion":"6.1.0","description":"Create consistent design-system-driven React UI components","directories":{},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_nodeVersion":"8.1.2","dependencies":{"clean-tag":"^1.0.4","styled-system":"^2.2.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ava":"^0.25.0","nyc":"^12.0.2","react":"^16.4.1","emotion":"^9.2.3","babel-cli":"^6.26.0","react-dom":"^16.4.1","react-emotion":"^9.2.3","babel-register":"^6.26.0","babel-preset-env":"^1.7.0","styled-components":"^3.3.2","babel-preset-react":"^6.24.1","react-test-renderer":"^16.4.1","babel-preset-stage-0":"^6.24.1"},"_npmOperationalInternal":{"tmp":"tmp/system-components_2.1.0-0_1529165849745_0.11741550125276401","host":"s3://npm-registry-packages"},"_id":"system-components@2.1.0-0","version":"2.1.0-0"}