{"_id":"@ashwin-op/color-input","name":"@ashwin-op/color-input","dist-tags":{"latest":"3.1.0"},"versions":{"3.1.0":{"name":"@ashwin-op/color-input","version":"3.1.0","description":"Color input","keywords":["sanity","cms","headless","realtime","content","color-input","sanity-plugin"],"homepage":"https://github.com/sanity-io/color-input#readme","bugs":{"url":"https://github.com/sanity-io/color-input/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/sanity-io/color-input.git"},"license":"MIT","author":{"name":"Sanity.io","email":"hello@sanity.io"},"exports":{".":{"types":"./lib/index.d.ts","source":"./src/index.ts","import":"./lib/index.esm.js","require":"./lib/index.js","default":"./lib/index.esm.js"},"./package.json":"./package.json"},"main":"./lib/index.js","module":"./lib/index.esm.js","source":"./src/index.ts","types":"./lib/index.d.ts","scripts":{"prebuild":"npm run clean && plugin-kit verify-package --silent && pkg-utils","build":"run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict","clean":"rimraf lib","compile":"tsc --noEmit","format":"prettier --write --cache --ignore-unknown .","link-watch":"plugin-kit link-watch","lint":"eslint .","prepare":"husky install","prepublishOnly":"run-s build","watch":"pkg-utils watch --strict"},"dependencies":{"@sanity/icons":"^2.0.0","@sanity/incompatible-plugin":"^1.0.4","@sanity/ui":"^1.0.0","lodash":"^4.17.21","react-color":"^2.19.3"},"devDependencies":{"@commitlint/cli":"^17.8.1","@commitlint/config-conventional":"^17.8.1","@sanity/pkg-utils":"^2.4.10","@sanity/plugin-kit":"^3.1.10","@sanity/semantic-release-preset":"^4.1.6","@types/react":"^18.2.33","@types/react-color":"^2.17.9","@types/styled-components":"^5.1.29","@types/tinycolor2":"^1.4.5","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0","eslint":"^8.52.0","eslint-config-prettier":"^8.10.0","eslint-config-sanity":"^6.0.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^8.0.1","lint-staged":"^13.0.3","npm-run-all":"^4.1.5","prettier":"^2.8.8","prettier-plugin-packagejson":"^2.4.6","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","rimraf":"^5.0.0","sanity":"^3.19.0","semantic-release":"^21.1.2","styled-components":"^6.1.2","typescript":"^4.9.5"},"peerDependencies":{"react":"^18","sanity":"^3","styled-components":"^5.2 || ^6.1"},"engines":{"node":">=14"},"publishConfig":{"access":"public"},"sanityExchangeUrl":"https://www.sanity.io/plugins/color-input","gitHead":"cff7af029e0054b11296770a062287e6276d967b","_id":"@ashwin-op/color-input@3.1.0","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-9O45qXZLJ3GhCOcD4/cM0r+BmpE9WQ1etu8xgEwsaAElc6+XPjpnefM3Y73Twrkytj7hSx6eXQPNCX/YBaWR4w==","shasum":"a3966a0a8c434ea119e274618f08c2ff789744ef","tarball":"https://registry.npmjs.org/@ashwin-op/color-input/-/color-input-3.1.0.tgz","fileCount":19,"unpackedSize":367055,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD78qwpXkzlt0/zCIqPDnixEYBxhqJtzEelE37q72ThIAIhAL4K2w2ErQjpHZRRp2biNMqPdDNSXWcF8yPWQeZtw2fm"}]},"_npmUser":{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"},"directories":{},"maintainers":[{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-input_3.1.0_1703214066505_0.5575646762542652"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-22T03:01:06.388Z","3.1.0":"2023-12-22T03:01:06.707Z","modified":"2023-12-22T03:01:06.971Z"},"maintainers":[{"name":"ashwin-op","email":"bsashwin9+npmjs@gmail.com"}],"description":"Color input","homepage":"https://github.com/sanity-io/color-input#readme","keywords":["sanity","cms","headless","realtime","content","color-input","sanity-plugin"],"repository":{"type":"git","url":"git+ssh://git@github.com/sanity-io/color-input.git"},"author":{"name":"Sanity.io","email":"hello@sanity.io"},"bugs":{"url":"https://github.com/sanity-io/color-input/issues"},"license":"MIT","readme":"# @sanity/color-input\r\n\r\n> This is a **Sanity Studio v3** plugin.\r\n> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity/tree/next/packages/%40sanity/color-input).\r\n\r\n## What is it?\r\n\r\nColor input plugin for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format.\r\n\r\n![Color input in the Studio](assets/color-input.png)\r\n\r\n## Installation\r\n\r\n```\r\nnpm install --save @sanity/color-input\r\n```\r\n\r\nor\r\n\r\n```\r\nyarn add @sanity/color-input\r\n```\r\n\r\n## Usage\r\n\r\nAdd it as a plugin in sanity.config.ts (or .js):\r\n\r\n```js\r\nimport {colorInput} from '@sanity/color-input'\r\n\r\nexport default defineConfig({\r\n  // ...\r\n  plugins: [colorInput()],\r\n})\r\n```\r\n\r\nNow you can use the `color` type in your schema types:\r\n\r\n```js\r\n// [...]\r\n{\r\n  fields: [\r\n    // [...]\r\n    {\r\n      name: 'favoriteColor',\r\n      title: 'Favorite color',\r\n      type: 'color',\r\n    },\r\n  ]\r\n}\r\n```\r\n\r\n## Options\r\n\r\n### Disable alpha\r\n\r\nTo disable the alpha option, set `disableAlpha` to `true`:\r\n\r\n```js\r\n// ...fields...\r\n{\r\n  name: 'favoriteColor',\r\n  title: 'Color no-alpha',\r\n  type: 'color',\r\n  options: {\r\n    disableAlpha: true\r\n  }\r\n}\r\n```\r\n\r\nWhich will render accordingly:\r\n\r\n![This is an image](assets/no-alpha.png)\r\n\r\n### Color list\r\n\r\nTo add list of predefined selectable color swatches for the user to choose from use `colorList`.\r\nThis uses the `react-color` under the hood https://casesandberg.github.io/react-color/#api-color\r\n\r\n```js\r\n// ...fields...\r\n{\r\n  name: 'favoriteColor',\r\n  title: 'Color with list',\r\n  type: 'color',\r\n  options: {\r\n    colorList: [\r\n      '#FF6900',\r\n      { hex: '#FCB900' },\r\n      { r: 123, g: 220, b: 181 },\r\n      { r: 0, g: 208, b: 132, a: 0.5 },\r\n      { h: 203, s: 95, l: 77, a: 1 },\r\n      { h: 202, s: 95, l: 46, a: 0.5 },\r\n      { h: 345, s: 43, v: 97 },\r\n      { h: 344, s: 91, v: 92, a: 0.5 },\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\nWhich will render accordingly:\r\n\r\n![This is an image](assets/color-list.png)\r\n\r\n## Data model\r\n\r\n```js\r\n{\r\n  _type: 'color',\r\n  hex: '#29158a',\r\n  alpha: 0.9,\r\n  hsl: {\r\n    _type: 'hslaColor',\r\n    h: 249.99999999999994,\r\n    s: 0.7328000000000001,\r\n    l: 0.313,\r\n    a: 0.9\r\n  },\r\n  hsv: {\r\n    _type: 'hsvaColor',\r\n    h: 249.99999999999994,\r\n    s: 0.8457987072945522,\r\n    v: 0.5423664,\r\n    a: 0.9\r\n  },\r\n  rgb: {\r\n    _type: 'rgbaColor',\r\n    r: 41\r\n    g: 21,\r\n    b: 138,\r\n    a: 0.9\r\n  }\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT-licensed. See LICENSE.\r\n\r\n## Develop & test\r\n\r\nThis plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)\r\nwith default configuration for build & watch scripts.\r\n\r\nSee [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)\r\non how to run this plugin with hotreload in the studio.\r\n\r\n### Release new version\r\n\r\nRun [\"CI & Release\" workflow](https://github.com/sanity-io/color-input/actions/workflows/main.yml).\r\nMake sure to select the main branch and check \"Release new version\".\r\n\r\nSemantic release will only release on configured branches, so it is safe to run release on any branch.\r\n","readmeFilename":"README.md"}