{"_id":"@artifak/media","_rev":"3-fecd7d17e9ddaa48c4beadceb4589868","name":"@artifak/media","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.1":{"name":"@artifak/media","version":"1.0.1","description":"Artifak media query mixin","keywords":[],"author":{"name":"Julian Low"},"license":"MIT","module":"dist/media.esm.js","main":"dist/media.cjs.js","src":"src/index.ts","types":"dist/src/index.d.ts","sideEffects":false,"directories":{"src":"src","test":"__tests__"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/heyjul3s/artifak.git"},"scripts":{"build":"rimraf dist && builder","test":"echo \"Error: run tests from root\" && exit 1"},"bugs":{"url":"https://github.com/heyjul3s/artifak/issues"},"homepage":"https://github.com/heyjul3s/artifak#readme","devDependencies":{"@artifak/bundler":"^1.1.3","@testing-library/react-hooks":"^3.7.0","@types/styled-components":"^5.1.7","css-mediaquery":"^0.1.2","styled-components":"^5.2.1"},"peerDependencies":{"react":">=17.0.1","react-dom":">=17.0.1","styled-components":">=5.2.1"},"dependencies":{"lodash.isempty":"^4.4.0","lodash.isplainobject":"^4.0.6"},"_id":"@artifak/media@1.0.1","_nodeVersion":"10.23.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-yq0rxAz0n1ftW2PWQKkc4N9yy9cBd7CLaCFzTxbMYfjWZsiPg5FSr/iPZUqJTr/Xejn+OrRzKpEWSfI3OLsdtA==","shasum":"e6f22fa0b8473b0e90e6863db6611faaabbba925","tarball":"https://registry.npmjs.org/@artifak/media/-/media-1.0.1.tgz","fileCount":4,"unpackedSize":36879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/SglCRA9TVsSAnZWagAAITcP/1aDAmaa9s6aTNsmTgSl\nhQoPuMehNfV9uRFB6G2njMrjyDoRgf2tmiPWAZHFZFDx/MeXwMlpcQsEXUNz\n7nttPUceL5ggCPw2pnR/6Fek6pLsKprbn7wVKMi4A9Y5qwWjTDNw/Rq0eQRM\nNQx/OrbR90VaVn3C2b+9ro/bie+5/mPcNqTGeWrC6ANTBsNidlhOw39LP2Ps\nJcp56So56Efh1QABlFOHZgACkUbww3rM5fFTSUn1ZmWXPaGkyDWjs/KAq7te\nIayWKas4MjED+DFNoPWDzgX+bTt84huAoNMVYAhu6lFzTmMu7Nd42lAlXTYx\n5w+zE+ki43M9vwolekFzAGyydEXseUOu5xkDqQqbihLXWmYbz9z9swUU7gRQ\nPlAIY2fGDc5B3QfVb/Lk6RK8tktVHXjGhX7DCrmDki2my9OwJzl3kzaaWC1+\n8NowGzn/vBvgLNVQDOnBLWDzUrNaeztmts2UxXH93BNg0UMFvkDeYRi/AblU\nFemuaa83Ua2K4b/5yYmz6e46uSDHd/QJtcYQEAk2hwfYTHB2difiSdboe0Vv\nSkAMmOQe2gLy31kcSNhZKxWkR2lHuL8UEt70UPjV9kdgkKOLilGrZvAcp/Oe\n82uQ5750PU6erF2nmAzh9d89wSm2nkNXhp9hc0mn6goktKrEG1Y98QGgeHP8\nVqXa\r\n=Xmwl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPcS3kSCaVmbQafrK/ClJA30kqSTk35oj00k38DP155QIgc2cDvcEXN3wtkJyQRePBr1zd8mzFEjxieZdPSp4vwxQ="}]},"_npmUser":{"name":"heyjules","email":"julian.cy.low@gmail.com"},"maintainers":[{"name":"heyjules","email":"julian.cy.low@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.1_1610426405315_0.938926104445577"},"_hasShrinkwrap":false},"1.0.2":{"name":"@artifak/media","version":"1.0.2","description":"Artifak media query mixin","keywords":[],"author":{"name":"Julian Low"},"license":"MIT","module":"dist/media.esm.js","main":"dist/media.cjs.js","src":"src/index.ts","types":"dist/src/index.d.ts","sideEffects":false,"directories":{"src":"src","test":"__tests__"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/heyjul3s/artifak.git"},"scripts":{"build":"rimraf dist && builder","test":"echo \"Error: run tests from root\" && exit 1"},"bugs":{"url":"https://github.com/heyjul3s/artifak/issues"},"homepage":"https://github.com/heyjul3s/artifak#readme","devDependencies":{"@artifak/bundler":"^1.1.3","@testing-library/react-hooks":"^3.7.0","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","@types/styled-components":"^5.1.7","css-mediaquery":"^0.1.2","react":"^17.0.1","react-dom":"^17.0.1","styled-components":"^5.2.1"},"peerDependencies":{"react":">=17.0.1","react-dom":">=17.0.1","styled-components":">=5.2.1"},"dependencies":{"lodash.isempty":"^4.4.0","lodash.isplainobject":"^4.0.6"},"_id":"@artifak/media@1.0.2","_nodeVersion":"10.23.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-a5tzbDqafgv5ahqWGaVcKyeJCa+7y9vRHZ229vkIYGKBgchDzmfa8Wk5bmtF3ul7Gj03WTADwkoWpGwC0av8ow==","shasum":"9e2d154175875671260c21d271895cb7c9d24a05","tarball":"https://registry.npmjs.org/@artifak/media/-/media-1.0.2.tgz","fileCount":4,"unpackedSize":37073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEmKUCRA9TVsSAnZWagAAcDgP/AmKDxggoe2kpR3ov8iV\nMzZcTpHc89WyeBASyBeIY5CzfFv+ZvSJqhPbOqotOxDbKRFOkGdgow4vG12v\nJN5V1StAT/663QZWP1riUgm7tZ4RwsKe6tN4vhefzUa7KDwadFcLin1n0DEM\ncJRjLQlzaaMeKW+ZxUU9LnvIz1vniynM+8QF2v+K5T2vCrqGqA1IulxD07vl\nw712Sl6SWmdtdBOTvzUtcQXKbmXtQdRfJCBXPHH9A1zTTIsZgjLmqQIIVCkC\naGbogYB9J5PBsxly+N1u2swZ+EikXIVV0LxJLoTeBaT3O4HWNA7VaXLUiaP7\n6/cqtcocZRAS6URuH/dZmkpBzQWS30OpJsrFED4x2Hhf1HQ+ypzW2cF/6/Bk\n2NqLqgggTwQGLKp/tCVQpCpbz1RNqc5Lj3ySoXaf+DSpwsRlgrPneRH4No1v\nDx3c4UHfdFnZ4nnaA086yqvcuyIUPJyJLH+OC5AuYeFf5+FeUuL6xmjWJn1Z\nCEt3CBnfjdfD5jwXDa8qEK/AYBv9SrSIR1lGsIEftj8tDxSLG4p/h4deU1IK\nZK8+6oaIZC2r532gogmgkKN2SEyRQE5bJqbQqLmHxA0m4foj7VCnxYHN//eL\ndo7faMP1lfo0xtm807DCiXvAWjV/hoCfFJNHB5mkN00NzZT4eqa+MiGIhsRO\nNhlH\r\n=+KGC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHn7tDMjYj8xpbReMXgvyHPA0PVT1+wVGVwCAA5btfaTAiEAyZTzF56vnQG+pzwyzE9oOxG82KOrneKyseI+OGtSLvM="}]},"_npmUser":{"name":"heyjules","email":"julian.cy.low@gmail.com"},"maintainers":[{"name":"heyjules","email":"julian.cy.low@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.2_1611817619896_0.5316299817725796"},"_hasShrinkwrap":false},"1.0.4":{"name":"@artifak/media","version":"1.0.4","description":"Artifak media query mixin","keywords":[],"author":{"name":"Julian Low"},"license":"MIT","module":"dist/media.esm.js","main":"dist/media.cjs.js","src":"src/index.ts","types":"dist/src/index.d.ts","sideEffects":false,"directories":{"src":"src","test":"__tests__"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/heyjul3s/artifak.git"},"scripts":{"build":"rimraf dist && builder","test":"echo \"Error: run tests from root\" && exit 1"},"bugs":{"url":"https://github.com/heyjul3s/artifak/issues"},"homepage":"https://github.com/heyjul3s/artifak#readme","devDependencies":{"@artifak/bundler":"^1.1.3","@testing-library/react-hooks":"^5.0.3","@types/react":"^17.0.1","@types/react-dom":"^17.0.0","@types/styled-components":"^5.1.7","css-mediaquery":"^0.1.2","react":"^17.0.1","react-dom":"^17.0.1","styled-components":"^5.2.1"},"peerDependencies":{"react":">=17.0.1","react-dom":">=17.0.1","styled-components":">=5.2.1"},"dependencies":{"@annexe/isstring":"^0.1.0","lodash.isempty":"^4.4.0","lodash.isplainobject":"^4.0.6"},"_id":"@artifak/media@1.0.4","_nodeVersion":"10.23.2","_npmVersion":"6.14.10","dist":{"integrity":"sha512-b6WlatfE6fev2fqTTDWPncY2tmrR0oIJaUy8zrRDctv/7k11H3DPUeUYk2f2wNHtiwD82en1QNosN42w4INqqg==","shasum":"15611bda9cdc020036708d20e0f931fa49c6d79a","tarball":"https://registry.npmjs.org/@artifak/media/-/media-1.0.4.tgz","fileCount":4,"unpackedSize":34193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLasoCRA9TVsSAnZWagAAcqUP/2bnV0kYljbc1Bt6wZ+i\nYN6fdifZ4znotthsIfRWw0EbRW0yfNoGeNcJxO7qK3TBbdosGCGRETuOG/DL\nkJBItshWvMNU82oDFhJiGBnUHXJ7kPXolgZ7OHoRYov2DrlVDgY/3kwnZJLi\nzb+GmWg3rMwqI8kqJj6TUccOEn1BoIESDKEM4xQSZ2bQoDH4BZW5kBac1mA/\nFD3jinSBbAOjzceEZGN6JsQXwp7DXuKRsrVAIHXGnz1vQFuI1/ftD9aqZ33/\nx34mli7aHId9bfTbI5xDh9VfAQMhiR8SLCoOxzx1s6UurhW/huja9B/D7ITD\n3QqUjHv4gOmLZpVO4BjDpUp/YYMu6GwL5RBDjdW5mGGqEmMIm3lFPI1vbfAG\ngOnYyoQAWe6jVIjBhFvNSbtS6yXJy49Kd0J83yBjkgEPHsfr/JBwLslPqmxf\n924uo8506L/JZM4JAJiaAnApGhF+HHUpsArYxGJevn9OOc0j9Bu8wcg1or6L\nk4Wx4yjsT/elkLluNSn8w0YeyLJlbEEVJeVc1I1h35FsMDhupvFRZNmtXIXa\n0/IGsTsrR4ckk4EreWVy8waXipitD2dHEMA5KZexhCShaYi+qEpPJDiKFK9U\nth5rBYZsTHAuSd/qBCT1Q16wBaVourgNv6mrxDo7j1tn1ywVns4izv70VTL2\npp6y\r\n=91RO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjzHUDjVKAZUcHBZtZ5scYyZHcu5NZBZ24MpVf6fMpFAiEAsR9vT08ZbOcScYY2dV5daAAZou2kYiuv+14Ki12nDZY="}]},"_npmUser":{"name":"heyjules","email":"julian.cy.low@gmail.com"},"maintainers":[{"name":"heyjules","email":"julian.cy.low@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.4_1613605671861_0.39696543301038956"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-12T04:40:04.917Z","1.0.1":"2021-01-12T04:40:05.447Z","modified":"2022-04-04T15:38:46.299Z","1.0.2":"2021-01-28T07:07:00.015Z","1.0.4":"2021-02-17T23:47:52.242Z"},"maintainers":[{"name":"heyjules","email":"julian.cy.low@gmail.com"}],"description":"Artifak media query mixin","homepage":"https://github.com/heyjul3s/artifak#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/heyjul3s/artifak.git"},"author":{"name":"Julian Low"},"bugs":{"url":"https://github.com/heyjul3s/artifak/issues"},"license":"MIT","readme":"# `@artifak/media`\n\nAlthough Artifak helps you to write less media queries, there are also many other types of media queries available now which focuses more on querying devices and accessibilty. The Artifak Media library essentially helps with that and is a styled-component mixin to help you write media queries for your styled-components. _Note that the CSS media query operator **\"not\"** is not supported for the time being._ Docs are also available at [Artifak Media](https://www.artifak.dev/?content=media).\n\n## Installation\n\n### Yarn\n\n```sh\nyarn add @artifak/media\n```\n\n### NPM\n\n```sh\nnpm install @artifak/media\n```\n\n## Usage\n\n### media\n\nSimply import **media** and the media query rule that you desire to use and include it in your styled component.\n\nAt its most basic usage, you can specify for example a min-width rule like so:\n\n```ts\nimport { media } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({ width: '>= 30em' })`\n    background: orange;\n  `}\n`;\n```\n\n#### Querying Media With \"And\"\n\nFor concatenation using the **\"and\"** keyword, below is a simple rule that would equate to **\"@media screen and (min-width: 30em)\"**. Basically, just append the rules to the query object to execute a media query with **\"and\"** keywords.\n\n```ts\nimport { media, screen } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({ screen, width: '>= 30em' })`\n    background: orange;\n  `}\n`;\n```\n\n#### Querying Media With \"Or\"\n\nFor **\"or\"** statements, simply provide another query object as argument. Below will equate to: **\"@media screen and (min-width: 30em), (orientation: landscape)\"**.\n\n```ts\nimport { media, screen, landscape } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({ screen, width: '>= 30em' }, { landscape })`\n    background: orange;\n  `}\n`;\n```\n\n#### Querying Media With Min, Max or Single Value\n\nKeys to queries that offer min/max values are\n\n- width\n- height\n- ratio (which is for **aspect-ratio**)\n- res (which is for **resolution**)\n\nFor min values, use the **\">=\"** operator.\n\n```ts\nimport { media, screen } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({ screen, width: '>= 30em' })`\n    background: orange;\n  `}\n`;\n```\n\nFor max values, use the **\"<=\"** operator.\n\n```ts\nimport { media, screen } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({ screen, width: '<= 30em' })`\n    background: orange;\n  `}\n`;\n```\n\nFor both **min** and **max** values as per below, is an example for min and max widths.\n\n```ts\nimport { media, screen } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({ screen, width: '30em >= width <= 50em' })`\n    background: orange;\n  `}\n`;\n```\n\nIf for some reason you only want a single value for these properties, it can be applied like so.\n\n```ts\nimport { media, screen } from '@artifak/media';\n\nconst MyArticle = styled.article`\n  ${media({\n    screen,\n    width: '30em',\n    height: '50em',\n    ratio: '1/3',\n    res: '72dpi'\n  })`\n    background: orange;\n  `}\n`;\n```\n\n## Media Queries\n\nApart from the common **width, height, aspect-ratio and resolution** queries, below are a list of currently available media queries. Due to some newer queries not having sufficient browser support, they are omitted from the library for the time being.\n\n### Available Queries\n\n| Property Name     | Value                                 |\n| ----------------- | ------------------------------------- |\n| all               | all                                   |\n| screen            | screen                                |\n| onlyScreen        | only screen                           |\n| print             | print                                 |\n| onlyPrint         | only print                            |\n| speech            | speech                                |\n| onlySpeech        | only speech                           |\n| hover             | hover: hover                          |\n| hoverNone         | hover: none                           |\n| anyHover          | any-hover: hover                      |\n| anyHoverNone      | any-hover: none                       |\n| pointer           | pointer: pointer                      |\n| pointerNone       | pointer: none                         |\n| anyPointer        | any-pointer: pointer                  |\n| anyPointerNone    | any-pointer: none                     |\n| displayFullScreen | display-mode: fullscreen              |\n| displayMinUI      | display-mode: minimal-ui              |\n| displayStandalone | display-mode: standalone              |\n| displayBrowser    | display-mode: browser                 |\n| portrait          | orientation: portrait                 |\n| landscape         | orientation: landscape                |\n| darkColorScheme   | prefers-color-scheme: dark            |\n| lightColorScheme  | prefers-color-scheme: light           |\n| reducedMotion     | prefers-reduced-motion: reduce        |\n| reducedMotionAny  | prefers-reduced-motion: no-preference |\n","readmeFilename":"README.md"}