{"_id":"@dmitrychebayewski/mui-color","_rev":"2-5fade006861d62a117e969dd52c558a4","name":"@dmitrychebayewski/mui-color","dist-tags":{"latest":"2.0.0-beta.3"},"versions":{"2.0.0-beta.2":{"name":"@dmitrychebayewski/mui-color","version":"2.0.0-beta.2","description":"The lightest colorpicker for React Mui v5. No dependencies. It uses Hooks and support Typescript, and more !","main":"index.js","module":"./esm/index.js","typings":"index.d.ts","homepage":"https://mikbry.github.io/mui-color/","repository":{"type":"git","url":"git+https://github.com/dmitrychebayewski/mui-color.git"},"bugs":{"url":"https://github.com/dmitrychebayewski/mui-color/issues"},"author":{"name":"Mik","email":"mik@miklabs.com"},"license":"MIT","keywords":["react","color picker","react-component","colorpicker","picker","tiny","color","mui","material-ui","material design","react-color","typescript"],"peerDependencies":{"@emotion/react":"^11.5.0","@emotion/styled":"^11.3.0","@mui/material":"^5.2.2","@mui/styles":"^5.2.2","material-ui-popup-state":"^1.5.3","prop-types":"^15.7.2","react":"^16.0.0 || ^17.0.0","react-dom":"^16.0.0 || ^17.0.0"},"dependencies":{},"gitHead":"25c121a147f9109f893c94c39b15da0830cbf90c","_id":"@dmitrychebayewski/mui-color@2.0.0-beta.2","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-G9Ur0/xGmKSNF0xJIMuOMg5nZz/omjKjkNCl92amtzX228FOK2bB751Cq2e8LzWnCUDxHvX/rSaiJ792ibt73Q==","shasum":"89d02d6e25ccdaaaa2c53fc5db7b8d60507cbcde","tarball":"https://registry.npmjs.org/@dmitrychebayewski/mui-color/-/mui-color-2.0.0-beta.2.tgz","fileCount":8,"unpackedSize":258639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDDb6CRA9TVsSAnZWagAAbywP/3nAW71G3bFMi3MLIHnT\nmZTDDoG44a61UahQs0GhUSInICpKDpdI8ugpKPDPxRTKpw9LUQaL+yC0WjM0\n6wdY5ra8cok32yPqjt7OPcyRacgcKxnmdrYu32xnfP9EvF1MxgWWfEL00cPB\nz58XUQAMDs7KXO/YkhmSGfY9t0pLmTtDkGxBqxP1wFNdaLCQoxds6UCZX01b\n6xiYjJqQ8aW72k4Ygq4XV8exfzFHHmw/jq5AIvVqSfDHJ214+gLg0p88Z3D8\nPGGQEWpQ0z5kXC/oHzB8R77tS2izoBaDvZohV6bjUw9zI3HR5imgsBUZZNQv\n5+UYX6ETa8wtnVjryU2jmJXOBJV0D/FdclB+zaD9t5EfylK15qM1gMgcVm7k\n5pTeav6H1KxobU1sCQtdqoOb2qCBvrKAsoQ7wHvVcRm6OfSNaGBYJLg835yp\nshUtA1lf3eSBJKLadKw8mqRsxuOBUaqJKkzJ/DYW+E+8j/hNXw+HXb8rrvEL\nlIKxT+kEt/9kvb0rdnbh07Vf1KCRv8Jj7MA6NgP/BD9gAyL7WALq/Z8nSr0l\nkTB4Zjrkuxm9a0Qx7/Wl+Hs6SAaPltvSzIDraW+X38389nyYY5xuvGg1ZKjS\nX5ikbiOr9LMfWJHRoSWVmI2rSKs1flfusPEN782dUYCNslO+t1WXqVbQwD4u\nacCK\r\n=ZGRy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdzG2gQlylPXLmjBkzFUDpSYfDrimA2YYuRZpflEu3mAiAlcBaMYG5mXeYGbRU4o/oqISo63ERnR8Zt4SVPGEZsCg=="}]},"_npmUser":{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"},"directories":{},"maintainers":[{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mui-color_2.0.0-beta.2_1644967673559_0.600872370074446"},"_hasShrinkwrap":false},"2.0.0-beta.3":{"name":"@dmitrychebayewski/mui-color","version":"2.0.0-beta.3","description":"The lightest colorpicker for React Mui v5. No dependencies. It uses Hooks and support Typescript, and more !","main":"index.js","module":"./esm/index.js","typings":"index.d.ts","homepage":"https://mikbry.github.io/mui-color/","repository":{"type":"git","url":"git+https://github.com/dmitrychebayewski/mui-color.git"},"bugs":{"url":"https://github.com/dmitrychebayewski/mui-color/issues"},"author":{"name":"Mik","email":"mik@miklabs.com"},"license":"MIT","keywords":["react","color picker","react-component","colorpicker","picker","tiny","color","mui","material-ui","material design","react-color","typescript"],"peerDependencies":{"@emotion/react":"^11.5.0","@emotion/styled":"^11.3.0","@mui/material":"^5.2.2","@mui/styles":"^5.2.2","prop-types":"^15.7.2","react":"^16.0.0 || ^17.0.0","react-dom":"^16.0.0 || ^17.0.0"},"gitHead":"c5e2b9d5d4810416e2f7eddb45d844e01f2254c4","_id":"@dmitrychebayewski/mui-color@2.0.0-beta.3","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-pwMmF2uKS1VCY5+ui410w53uGzTYENIsr5IskWkZhO6Q27E1RgqjtzMXL+Q7BfVmyFaFrZsbfJb2WMmwS4qy7Q==","shasum":"05b93d079ff8b37e57d36d49f2cb3f3e0dd0ebb6","tarball":"https://registry.npmjs.org/@dmitrychebayewski/mui-color/-/mui-color-2.0.0-beta.3.tgz","fileCount":8,"unpackedSize":259341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH6LjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcrA/+NXV/Autl4qap3hJjvkWgecmkSXptZNU3nCiWSjjyuqq2Dmxm\r\nK2nkcPhK66XhQcEzD578EMHJw+M94IHwpLflqakq1+JpD4Y0ez2TyCYu1OqN\r\nnc0JioO37GMGCgzzJN/sPdrLJtwGcV2bLIltN45z8QR8iBsKBliBXqsNCET7\r\nzxs09HoSGW0+Uclm7qbwEBV+TMcNMTfwr3V0IQ2eR6pfI8mLhLWpZepfn4HZ\r\nm+yO7yzGntgHe1xeO46icewr20tCxIFUX36g+HX2z4Ps0xEcVzF2ZGHXS/1u\r\nROnPJ7RlraCPQrDLGJn6iH+rXghtH8RTVFyS8GX9I7Xc+NpHUkiQ1XcY6siS\r\nAY4Ron0OO9WZKvueAGT7tp8AbPjAYKvxJ0/dPv+JJNQQdoN1dL664Ffdeap1\r\ngLagWatPXpVYmFFM/cu0F0XvwR6cldEyAJpf2eoSHIbujA0YamaNt7tIzFp5\r\n57jkb5JET1/sxO78dn+2bHP06V2IOCszYTeWzYH+hdeTA76754ubV4zKlW4Z\r\nKHcbODYSJxTVx7jt47B9xHO/pg7fZ2Wlhnn6ZRx2NqkKPFARkLVFgiWRTTXt\r\nbJzEsq7AoznpWQjFnK/nKE5ZDXdCoP1P5qXumfxldSX6+V5NJNLqPOobu914\r\nrgMbQ7jbIqGfi4zBq5KOS2i2si0r5KwMNvU=\r\n=zCNy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs6xS31McAV8mhh1qPioCixBmfvxqu9owtvEKNubXwggIhAOcoEZfaaPe5U8rYojDHrqZKr/wvz6lpSHyNPjjynXa/"}]},"_npmUser":{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"},"directories":{},"maintainers":[{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mui-color_2.0.0-beta.3_1646240483548_0.3395546080232008"},"_hasShrinkwrap":false}},"time":{"created":"2022-02-15T23:27:53.500Z","2.0.0-beta.2":"2022-02-15T23:27:54.151Z","modified":"2022-04-05T04:58:47.134Z","2.0.0-beta.3":"2022-03-02T17:01:23.740Z"},"maintainers":[{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"}],"description":"The lightest colorpicker for React Mui v5. No dependencies. It uses Hooks and support Typescript, and more !","homepage":"https://mikbry.github.io/mui-color/","keywords":["react","color picker","react-component","colorpicker","picker","tiny","color","mui","material-ui","material design","react-color","typescript"],"repository":{"type":"git","url":"git+https://github.com/dmitrychebayewski/mui-color.git"},"author":{"name":"Mik","email":"mik@miklabs.com"},"bugs":{"url":"https://github.com/dmitrychebayewski/mui-color/issues"},"license":"MIT","readme":"# `mui-color` picker and other components\r\n\r\n[![Build Status][action-image]][action-url]\r\n[![codecov][codecov-image]][codecov-url]\r\n[![NPM version][npm-image]][npm-url]\r\n[![License][license-image]][license-url]\r\n[![minisize][min-image]][min-url]\r\n[![dependency status][deps-svg]][deps-url]\r\n[![dev dependency status][dev-deps-svg]][dev-deps-url]\r\n[![peer dependency status][peer-deps-svg]][peer-deps-url]\r\n[![Downloads][downloads-image]][downloads-url]\r\n\r\n[action-image]: https://github.com/mikbry/mui-color/workflows/Build%20and%20Deploy/badge.svg\r\n[action-url]: https://mikbry.github.io/mui-color/\r\n[codecov-image]: https://codecov.io/gh/mikbry/mui-color/branch/master/graph/badge.svg?token=K4P0vnM5fh\r\n[codecov-url]: https://codecov.io/gh/mikbry/mui-color\r\n[npm-image]: https://img.shields.io/npm/v/mui-color.svg\r\n[npm-url]: https://npmjs.org/package/mui-color\r\n[license-image]: https://img.shields.io/github/license/mikbry/mui-color\r\n[License-url]:https://github.com/mikbry/mui-color/blob/master/LICENSE\r\n[min-image]:https://badgen.net/bundlephobia/min/mui-color\r\n[min-url]:https://bundlephobia.com/result?p=mui-color\r\n[deps-svg]: https://david-dm.org/mikbry/mui-color.svg\r\n[deps-url]: https://david-dm.org/mikbry/mui-color\r\n[dev-deps-svg]: https://david-dm.org/mikbry/mui-color/dev-status.svg\r\n[dev-deps-url]: https://david-dm.org/mikbry/mui-color#info=devDependencies\r\n[peer-deps-svg]: https://david-dm.org/mikbry/mui-color/peer-status.svg\r\n[peer-deps-url]: https://david-dm.org/mikbry/mui-color#info=peerDependencies\r\n[downloads-image]: http://img.shields.io/npm/dm/mui-color.svg\r\n[downloads-url]: http://npm-stat.com/charts.html?package=mui-color\r\n\r\n# Preview port of Material-ui-color to Mui v5\r\n\r\n> Collections of color components for [material-ui](https://github.com/mui-org/material-ui). No dependencies, small, highly customizable and theming support !\r\n\r\n\r\n\r\n## Contents\r\n- [Why rework Mikbry's project?](#Why-rework-Mikbry's-project?)\r\n- [Why another ColorPicker?](#Why-another-ColorPicker-?)\r\n- [Documentation](#documentation)\r\n- [Requirements](#requirements)\r\n- [Install](#install)\r\n- [Usage](#usage)\r\n- [Roadmap](#roadmap)\r\n- [Contribute](#contribute)\r\n- [License](#license)\r\n\r\n## Why rework Mikbry's project?\r\n- Plans are submitting PR into his mui-color project, but I need enhanced Color Picker MUI 4 for a limited time;\r\n- Allows passing useful properties to material-ui TextField underlying component;\r\n- Stable version 1.2.0 codebase, Material UI V.4;\r\n- ColorPicker adornment: Button, embedded in the underlying TextField (similarly to material-ui-pickers experience).\r\n\r\n## Why another ColorPicker ?\r\n\r\n- Fully compatible with Material-UI : theming and low level components\r\n- Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode\r\n- Small in size (<30kb) without any direct dependencies\r\n- Use modern React hook and coding conventions\r\n- Documentation made with Storybook, using Component Story Format and MDX\r\n\r\n## Documentation\r\n\r\nFull documentation is available here :\r\n\r\nhttps://mikbry.github.io/mui-color/\r\n\r\n### Examples\r\n\r\n> You can find examples [here](EXAMPLES.md) and [here](/examples).\r\n\r\nAlso in codesanbox\r\n\r\n- Javascript : https://codesandbox.io/s/mui-color-qb4vm?file=/src/App.jsx\r\n\r\n- Typescript : https://codesandbox.io/s/mui-color-picker-qvcg3?file=/src/App.tsx\r\n\r\n\r\n## Requirements\r\n- Works on modern browsers supporting ES6+ (Not compatible with IE)\r\n- React and Material-UI frameworks\r\n\r\n## Install\r\n\r\n```bash\r\nyarn add @dmitrychebayewski/mui-color\r\n```\r\n\r\nOr using npm\r\n```bash\r\nnpm install @dmitrychebayewski/mui-color\r\n```\r\n\r\n## Usage\r\n\r\nyou need to have in your dependencies:\r\n\r\n```\r\n \"@mui/material\": \"^4.11.2\",\r\n \"material-ui-popup-state\": \"^1.7.1\",\r\n \"prop-types\": \"^15.7.2\",\r\n \"react\": \"^17.0.1\",\r\n \"react-dom\": \"^17.0.1\",\r\n```\r\n\r\n`mui-color` bring 5 components.\r\n\r\n### ``\r\n\r\nA popover component to display a color tool box. It uses `ColorBox` and `material-ui-popup-state`.\r\n\r\n```javascript\r\nimport { ColorPicker } from 'mui-color';\r\n\r\nexport const Container = () => (\r\n \r\n \r\n
\r\n);\r\n```\r\n\r\nAt first it display a button + an input\r\n\r\n[ColorPicker documentation](https://mikbry.github.io/mui-color/?path=/story/components-colorpicker--basic)\r\n\r\n### ``\r\n\r\nA component to display a color tool box\r\n```javascript\r\nimport { ColorBox } from 'mui-color';\r\n\r\nexport const Container = () => (\r\n \r\n \r\n
\r\n);\r\n```\r\n\r\n[ColorBox documentation](https://mikbry.github.io/mui-color/?path=/story/components-colorbox--basic)\r\n\r\n### ``\r\n\r\nAn input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).\r\n\r\n```javascript\r\nimport { ColorInput } from 'mui-color';\r\n\r\nexport const Container = () => (\r\n \r\n \r\n
\r\n);\r\n```\r\n\r\n[ColorInput documentation](https://mikbry.github.io/mui-color/?path=/story/components-colorinput--basic)\r\n\r\n### ``\r\n\r\nA component to display a grid of color buckets.\r\n\r\n```javascript\r\nimport { ColorPalette } from 'mui-color';\r\n\r\nconst palette = {\r\n red: '#ff0000',\r\n blue: '#0000ff',\r\n green: '#00ff00',\r\n yellow: 'yellow',\r\n cyan: 'cyan',\r\n lime: 'lime',\r\n gray: 'gray',\r\n orange: 'orange',\r\n purple: 'purple',\r\n black: 'black',\r\n white: 'white',\r\n pink: 'pink',\r\n darkblue: 'darkblue',\r\n};\r\n\r\nexport const Container = () => (\r\n \r\n \r\n
\r\n);\r\n```\r\n\r\n[ColorPalette documentation](https://mikbry.github.io/mui-color/?path=/story/components-colorpalette--basic)\r\n\r\n### ``\r\n\r\nDisplays a button filled with a color\r\n\r\n```javascript\r\nimport { ColorButton } from 'mui-color';\r\n\r\nexport const Container = () => (\r\n \r\n \r\n
\r\n);\r\n```\r\n\r\n[ColorButton documentation](https://mikbry.github.io/mui-color/?path=/story/components-colorbutton--basic)\r\n\r\n## Roadmap\r\n\r\n### v1.0.0 - [Current version](https://github.com/mikbry/mui-color/releases/tag/v1.0.0)\r\n- remove `styled-components` to have less dependencies and reduce size\r\n- display wrong color using a red checked box\r\n- bugs fixes\r\n\r\n## Contribute\r\n\r\nContributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.\r\n\r\n\r\n## License\r\n\r\nReleased under MIT License\r\n","readmeFilename":"README.md"}