{"_id":"react-figma-ui","_rev":"47-dd412ff313595a2cfa6c990a1f8abecc","name":"react-figma-ui","dist-tags":{"latest":"1.1.0","alpha":"2.0.0-alpha.1","beta":"1.1.1-beta.1","experiment":"1.1.0-experiment.8"},"versions":{"1.0.0-alpha.0":{"name":"react-figma-ui","version":"1.0.0-alpha.0","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8"},"devDependencies":{"@babel/core":"^7.9.6","@rollup/plugin-node-resolve":"^8.0.0","@storybook/addon-knobs":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.0.4","@types/jest":"^25.2.3","@types/react":"^16.9.35","@typescript-eslint/parser":"^2.34.0","babel-loader":"^8.1.0","eslint":"7.0.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.2","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.4","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.1","rollup-plugin-terser":"^5.3.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.0.0","ts-loader":"^7.0.4","typescript":"^3.9.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/jb1905/react-figma-ui)\n\n[![NPM version](http://img.shields.io/npm/v/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](http://img.shields.io/npm/dm/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n\n## About\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n## Demo\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\nFirst, install the library in your project by npm:\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n```sh\n$ yarn add react-figma-ui\n```\n\n## Getting Started\n\n## License\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"86e584c0a20cf70ac28a2b2f1ae1d3c24576000e","_id":"react-figma-ui@1.0.0-alpha.0","_nodeVersion":"12.10.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-TTDkT/2ruhoPOBJTyu9nckBCIED+DbzJBS0p7CuvF4ZRyIOxxMfe+5u/e9/zW983uBV12juY4zwFd3+q2/rA2w==","shasum":"f196f8e88a2fc9957fea5e5925b9126cfbc1438a","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-alpha.0.tgz","fileCount":31,"unpackedSize":47732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexa4ZCRA9TVsSAnZWagAAyhAP/3Sazol4wPZCvYdTJCSz\n8+gBEr0QABlXlbqXfUGToA2oT9X2HmoktrguzJ0r+3U4HvJL4dD0AiP1Rl84\nwk8u2utuRqKeaCQ0q/jv6HyS96Y59DC9pFZCvsA64Hwtf3NdHGZ+a7672iE+\nQHZQgtNgnMcSIXTPQkjA9fLUfdQKhbkQ5ajoVwyd9OV37xgHInnjbcU/fsYR\nGbxJnBJcCsjtGmxeq9D8aC7wz8s1gxgIXc+cns1O5C5Di1zRvtFAFDnk7blU\nSJRRFWWmfet47m+pprZVTNwJplmdf+yBgXPbKIBYGugqBryn4UPMXZUHIoMI\nvWAIjsAm0Ge+UXk0Xket8M2bbylfeD7k5aXY1Vh3PW7lMlAz3rmsvwJ4fJZc\nD64xlb+ChzQ9Pw6qdRKPUa6z0faHUMCrlbI6lSETboyXNjiXiPKxSl2C2sln\nZ+4kar0ahJct/6v7RyYa8QrWmuDbOTK+7EXsCcan+mSqhleuJVmXpRE0F38M\nLpmmsHKlwk3gKlZzIRA7we/gBTv3cioFVTfppVFS5j5KKRtHwAo3sm+AA//a\nnhiIpPSH9ZwLxe9TaF16hT0W0vNGsjfOFtNhyUiD7s2yDPHd348B/0orGaPb\nWqcwoJC4lLYPlvC9E1uYNvfRBCcaBRFcv76T4rWtzPtT3NxSLtx1qV1n99vA\nXZa2\r\n=qfbI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ4XEd/BLqq0D9ZNRLjWAdAaJcjoE5F690/PR0LU6wEgIgUOqjwyoieQpe/IYpCpbZuwbHbomZNUT6klVKTcTns/E="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-alpha.0_1590013465252_0.6791211939440074"},"_hasShrinkwrap":false},"1.0.0-alpha.1":{"name":"react-figma-ui","version":"1.0.0-alpha.1","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8"},"devDependencies":{"@babel/core":"^7.9.6","@rollup/plugin-node-resolve":"^8.0.0","@storybook/addon-knobs":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.0.4","@types/jest":"^25.2.3","@types/react":"^16.9.35","@typescript-eslint/parser":"^2.34.0","babel-loader":"^8.1.0","eslint":"7.0.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.2","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.4","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.1","rollup-plugin-terser":"^5.3.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.0.0","ts-loader":"^7.0.4","typescript":"^3.9.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/jb1905/react-figma-ui)\n\n[![NPM version](http://img.shields.io/npm/v/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](http://img.shields.io/npm/dm/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n\n## About\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n## Demo\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\nFirst, install the library in your project by npm:\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n### Button\n\nTo use the button, use the following HTML markup. Each button has a destructive option. Teritary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n\n// Tertirary (Hyperlink style button)\n<Button tint=\"tertirary\">Label</Button>\n<Button tint=\"tertirary\" destructive>Label</Button>\n<Button tint=\"tertirary\" disabled>Label</Button>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`tint` | \n`destructive` | \n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following HTML markup. Remember each checkbox should get a unique ID that is referenced in the label. This ensures the checkbox and the entire label are clickable.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox>Label</Checkbox>\n\n// Checkbox checked\n<Checkbox checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox disabled>Label</Checkbox>\n```\n\nParam | Description\n-|-\n`containerProps` | \n`labelProps` | \n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following markup and also make sure you initialize the Javascript for the disclosure to work.\n\n```jsx\nimport { Disclosure, DisclosureItem } from 'react-figma-ui';\n\nconst items = [\n  {\n    heading: \"\",\n    content: \"\",\n  }\n];\n\n<Disclosure\n  items={items}\n  render={({ heading, content }) => (\n    <DisclosureItem\n      heading={heading}\n      content={content}\n      section={}\n      expanded={}\n    />\n  )}\n/>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`section` | \n`expanded` | \n\n---\n\n### Icon\n\nTo use the icon component, use the following markup. Apply the appropriate modifier class to select the item you wish to use, you can also add additional modifiers to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`iconName` | \n`spin` | \n`colorName` | \n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component. Refer to the icon component above for its usage.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n//\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n---\n\n### Input\n\nTo use the input, use the following markup. You can also insert an icon into the input (see Icon component for usage).\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n---\n\n### Labels and sections\n\nTo use a label or section, use the following markup.\n\n```jsx\nimport { Label } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following markup. The tip also makes use of the icon component (see Icon component for usage).\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n<Onboarding iconProps={{ iconName: 'styles' }}>\n  Onboarding tip goes here.\n</Onboarding>\n```\n\n---\n\n### Radio button\n\nTo create an radio button, use the following markup. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio>Radio button</Radio>\n\n// Radio button checked\n<Radio checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio disabled>Radio button</Radio>\n```\n\n---\n\n### Select menu\n\nTo create an select menu, use the following markup. The select menu also requires you to initalize it with Javascript. If your plugin requires you to add or remove items in the select menu, simply use Javascript to modify the select menu and the select will reinitialize.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\nconst options = [\n  {\n    value: \"\"\n  }\n];\n\n<SelectMenu\n  options={options}\n  render={({}) => (\n    <SelectMenuOption></SelectMenuOption>\n  )}\n/>\n```\n\n---\n\n### Switch\n\nTo use the switch, use the following HTML markup. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id={}>\n</Switch>\n\n// Switch checked\n<Switch id={}>\n</Switch>\n\n// Switch disabled\n<Switch id={}>\n</Switch>\n```\n\n---\n\n### Textarea\n\nTo use the textarea, use the following HTML markup.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following markup plus additional modifier classes to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`size` | \n`weight` | \n`inverse` | \n\n*Defaults: Font size 11px, normal weight, positive application*\n\n## License\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6e151e78a95697d1cdd5034c00990cf1610012b3","_id":"react-figma-ui@1.0.0-alpha.1","_nodeVersion":"12.10.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-g8N/tSxh/fl5ZXYNOq+eiyzdVJTZYY3MoqLmagTt7hhGA44GbZhJv2PsHR7B36YskJY01jV47miH9A1/DUSMBA==","shasum":"0f56a48bf6302a120dcc1ec2c2235a92339333fa","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-alpha.1.tgz","fileCount":35,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoOYCRA9TVsSAnZWagAAmI8P/1VSpw/zmLhv7bL/DGP8\nmue2FhU7uGtRVd5QkOxTi7aSZaJAF4mgbyhbwj8y9zhS5q0FHdXHF5IKj21I\n9xbPem46f2ViQR6A99svOavc0vPfo5AA0wbUwHjDxRcvFfnxlsbvD4vd20sc\nx4fzCjJ1zm19AQXnVZxD5jsGj4qQpP23Envy8GmQyoyAIOCZHp6SYsGzgVPj\nEw2XBbEyOzO9dyU31LZ/DobYDDL6Ar+oMC0jAyPFZ7qMMpGpowz8UqQKF/T8\niyVeRY0zl3Zr0VDmjQsMm7GaCH/eWDVJDPoiqkqOGUoJNtjvP6fi1iKQQhEY\nNrM65HqVvTPL55a1WCWTtEQhCaiQSQM2zrVWoA5I3APXcJ0rK5ontMGvQI4f\n1XkhkM51FkfVMKmwKAbTBRP+v/DTEvnxF9pR/XoS+xIzjObTbDIbbNf4tTqE\nv/DxpQtl7luvKguLgJrilTkcitu7F96Fuo2rei/ifmrIcILLflA8CxEYsKi0\nqQlNRBwLqgvBwT7CXejXYUsoqwGUtuR+vQVeZqttD5k+9Von8hMkiEryVLHI\nQ5sak4MIk0bVvWLHUIzT5/rGHsnhfn3rudI6B/AuRtcrfvYJ4Sc3qiaAWf+a\nC+PmZvDrZsgWcJ/lw/JCq73B4xYqRMLO7MGzPpfvnw+CBazSZuFxmIP43k3h\nu3k7\r\n=pW72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVAU/rTpQW9cbkLKcKudvO1ONoW+/wfFs9QnCqM7GBIQIhALshmHa94uRs2f9/LfcBM7q/iZHEg9+07YhM4iFF77xn"}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-alpha.1_1590068120148_0.07807322954873053"},"_hasShrinkwrap":false},"1.0.0-alpha.2":{"name":"react-figma-ui","version":"1.0.0-alpha.2","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8"},"devDependencies":{"@babel/core":"^7.9.6","@rollup/plugin-node-resolve":"^8.0.0","@storybook/addon-knobs":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.0.4","@types/jest":"^25.2.3","@types/react":"^16.9.35","@typescript-eslint/parser":"^2.34.0","babel-loader":"^8.1.0","eslint":"7.0.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.2","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.4","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.1","rollup-plugin-terser":"^5.3.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.0.0","ts-loader":"^7.0.4","typescript":"^3.9.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/jb1905/react-figma-ui)\n\n[![NPM version](http://img.shields.io/npm/v/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](http://img.shields.io/npm/dm/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n\n## About\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n## Demo\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\nFirst, install the library in your project by npm:\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n### Button\n\nTo use the button, use the following HTML markup. Each button has a destructive option. Teritary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n\n// Tertirary (Hyperlink style button)\n<Button tint=\"tertirary\">Label</Button>\n<Button tint=\"tertirary\" destructive>Label</Button>\n<Button tint=\"tertirary\" disabled>Label</Button>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`tint` | \n`destructive` | \n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following HTML markup. Remember each checkbox should get a unique ID that is referenced in the label. This ensures the checkbox and the entire label are clickable.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox>Label</Checkbox>\n\n// Checkbox checked\n<Checkbox checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox disabled>Label</Checkbox>\n```\n\nParam | Description\n-|-\n`containerProps` | \n`labelProps` | \n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following markup and also make sure you initialize the Javascript for the disclosure to work.\n\n```jsx\nimport { Disclosure, DisclosureItem } from 'react-figma-ui';\n\nconst items = [\n  {\n    heading: \"\",\n    content: \"\",\n  }\n];\n\n<Disclosure\n  items={items}\n  render={({ heading, content }) => (\n    <DisclosureItem\n      heading={heading}\n      content={content}\n      section={}\n      expanded={}\n    />\n  )}\n/>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`section` | \n`expanded` | \n\n---\n\n### Icon\n\nTo use the icon component, use the following markup. Apply the appropriate modifier class to select the item you wish to use, you can also add additional modifiers to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`iconName` | \n`spin` | \n`colorName` | \n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component. Refer to the icon component above for its usage.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n//\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n---\n\n### Input\n\nTo use the input, use the following markup. You can also insert an icon into the input (see Icon component for usage).\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n---\n\n### Labels and sections\n\nTo use a label or section, use the following markup.\n\n```jsx\nimport { Label } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following markup. The tip also makes use of the icon component (see Icon component for usage).\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n<Onboarding iconProps={{ iconName: 'styles' }}>\n  Onboarding tip goes here.\n</Onboarding>\n```\n\n---\n\n### Radio button\n\nTo create an radio button, use the following markup. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio>Radio button</Radio>\n\n// Radio button checked\n<Radio checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio disabled>Radio button</Radio>\n```\n\n---\n\n### Select menu\n\nTo create an select menu, use the following markup. The select menu also requires you to initalize it with Javascript. If your plugin requires you to add or remove items in the select menu, simply use Javascript to modify the select menu and the select will reinitialize.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\nconst options = [\n  {\n    value: \"\"\n  }\n];\n\n<SelectMenu\n  options={options}\n  render={({}) => (\n    <SelectMenuOption></SelectMenuOption>\n  )}\n/>\n```\n\n---\n\n### Switch\n\nTo use the switch, use the following HTML markup. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id={}>\n</Switch>\n\n// Switch checked\n<Switch id={}>\n</Switch>\n\n// Switch disabled\n<Switch id={}>\n</Switch>\n```\n\n---\n\n### Textarea\n\nTo use the textarea, use the following HTML markup.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following markup plus additional modifier classes to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\nParam | Description\n-|-\n`size` | \n`weight` | \n`inverse` | \n\n*Defaults: Font size 11px, normal weight, positive application*\n\n## License\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6e151e78a95697d1cdd5034c00990cf1610012b3","_id":"react-figma-ui@1.0.0-alpha.2","_nodeVersion":"12.10.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-WJZ4UBEtVuiZsCmKPSll44Q7pJmpK6mLqOuWLQIfWILttfD8uLll1qNf9U1t+yan1ibQxfOmRzXXtmqq9MyeRA==","shasum":"1c7c957b37f8e6ffe53f5c8861eb59f4536ecc84","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-alpha.2.tgz","fileCount":30,"unpackedSize":55564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoO8CRA9TVsSAnZWagAALSUP/0VqRAnqoYq7GosYfWBg\n7HPwV4OIWhE/e9moXTfvAx+3hs3aa/7k4VxfpW35vSA5DDpZCC7Ge/aXGR1v\nnkeV1tT8iJsZq5SFxX8CzIZF9UKhfzBxuPyA02TZ5vtraqETbRXG6+saJZjc\n+oBVB7+iSz15Vw5WLlzG9bSTILxmlfwQ0NcYB39sdL2O5FbU/ZKGmVH/1dzC\n1/CPZW8MddOczlrG11qle8CloXu2BvNYeN5vBrdmLgj0OcVoWER/QZP1jy/k\nXVl1xo6J4jwQh/aAgzOWWPGX788+R0cg3HRFBh8hwYUMEp+SQREPRQug8ny2\nTt006qpMCei/AHiVbWc/e3lJeIRETRnZD2f0VCGqGXVB8kXQMdNoeQ7medMC\nRYbcMT2L1LGWyJJSjx/1oC+277ojZvWpa4w0xGnN+1a8c2c4jQVPb6NbtYRg\nzJvH3MTqD99lFJCtlDZDafyxU1biHtyIXIS0Dr9NwFiQ614Kz7aNt3vdbqXS\n+anK2AeC0yFd4oiELJU1L9Tez2eZnPRqQ0naPeDyFL9V873ZPJuQVr6nmdb0\nTS8UrUeMSVBhiiaz/0V0HKtCAVgg9YSVycpvIX4FRl6Qf2w9LEOFfyGokNTQ\nAeGtDe4wIkjTLnakr/nzm5Rbn1kCynU7wxJ1hNjv6aG4eHWVl6dU2W59eeaz\neTwk\r\n=p3Wx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHY8oaCPkJ3goTXQGpANe1j0hZ4G4V7HAkOB0fnq0QH9AiEA7qsNtvJruDdf/5v7+ayKJcpOW4pWMIbvRw9EnIYC4yM="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-alpha.2_1590068156460_0.13612339020241726"},"_hasShrinkwrap":false},"1.0.0-beta.2":{"name":"react-figma-ui","version":"1.0.0-beta.2","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8"},"devDependencies":{"@rollup/plugin-node-resolve":"^8.0.0","@storybook/addon-knobs":"^5.3.18","@storybook/addon-links":"^5.3.18","@storybook/addons":"^5.3.18","@storybook/react":"^5.3.18","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.0.4","@types/jest":"^25.2.3","@types/react":"^16.9.35","@typescript-eslint/parser":"^3.0.0","babel-loader":"^8.1.0","eslint":"7.1.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.2","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.6","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.1","rollup-plugin-terser":"^6.0.1","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.0.0","ts-loader":"^7.0.4","typescript":"^3.9.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/test/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/test/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/jb1905/react-figma-ui)\n\n[![NPM version](http://img.shields.io/npm/v/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](http://img.shields.io/npm/dm/react-figma-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n## Contents\n\n* [Demo](#demo)\n* [How to Install](#how-to-install)\n* [Components](#components)\n  * [Button](#button)\n  * [Checkbox](#checkbox)\n  * [Disclosure](#disclosure)\n  * [Icon](#icon)\n  * [Icon button](#icon-button)\n  * [Input](#input)\n  * [Labels and sections](#labels-and-sections)\n  * [Onboarding tip](#onboarding-tip)\n  * [Radio button](#radio-button)\n  * [Select menu](#select-menu)\n  * [Switch](#switch)\n  * [Textarea](#textarea)\n  * [Type](#type)\n\n## Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Teritary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n\n// Tertirary (Hyperlink style button)\n<Button tint=\"tertirary\">Label</Button>\n<Button tint=\"tertirary\" destructive>Label</Button>\n<Button tint=\"tertirary\" disabled>Label</Button>\n```\n\n#### Available options\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n| Param            | Description                  |\n| ---------------- | ---------------------------- |\n| `containerProps` | Props for checkbox container |\n| `labelProps`     | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureItem } from 'react-figma-ui';\n\n// Example items\nconst items = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n<Disclosure\n  items={items}\n  render={({ heading, content, id }, index) => (\n    <DisclosureItem\n      heading={heading}\n      content={content}\n      section={index % 2 === 0}\n      expanded={index % 2 === 1}\n      key={id}\n    />\n  )}\n/>\n```\n\n#### Available options\n\n| Param      | Description                                   |\n| ---------- | --------------------------------------------- |\n| `section`  | Style label like a heading                    |\n| `expanded` | Add this option to have item expanded on load |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n<Onboarding iconProps={{ iconName: 'styles' }}>\n  Onboarding tip goes here.\n</Onboarding>\n```\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n<SelectMenu\n  options={options}\n  render={({ value, label }) => (\n    <SelectMenuOption value={value} key={value}>\n      {label}\n    </SelectMenuOption>\n  )}\n/>\n```\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"9b42eaf2d2160a88bb56e296d388651bc87e00bf","_id":"react-figma-ui@1.0.0-beta.2","_nodeVersion":"12.10.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-cols6dVZpZT0d5ZvaQZe20mZazpsliqgsOLO8aJ/FGw+VrK9kdC5WQEfDjN98pCkQ2VLoBKPpKgDggyBV0A4VQ==","shasum":"9f6cfd7499f945ebf3c45c21ae1208f6204c55ae","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-beta.2.tgz","fileCount":31,"unpackedSize":58698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyVYHCRA9TVsSAnZWagAAYHwP/R16nTWj1zYNbk9PxKoR\n/9kkRg3+bsJoQWkZL8An/kwwbSXjiKJ7gh0u9ET86BfxVISN9KOPCeTkBiQF\nz0W7J6InPCf7jYHZJZs4bJex7WuwyMZMXxGLrItGjWWVKHUZptC4kJJGLwdV\n1x2dQAWOtC8zNGhIrWLeC1nhbv+CYOU+IuX3jrmhnNf/zqMIJ02zyNliJfsf\nledGAFz2eSWdMAN2xpYssqWLjXtuh3isxQJ33z6EScjBe5A2lEemDeUdwVZL\nR/QRbqK5OakxGZ4rdUdO5A5k0oh1EtmkG8/BI2UjLSobG9soYqPdd+jmveq2\nLalMNhSNGHVu7kNrUISgNBc1iIrpwedkEg/2W3tVGLtL4PCekkuj8/R1T4+t\nkpWG5dWd3oredyAWgXYm1BhLL/HOW1uBXB7+dapxuyUVvO3KtCVCH4JbKoNy\nikjgcvR0zmQ/oMBrHNUYRX0LVSPXOlsp+q9l1yUeZ9CRgJMtW0fWl3yL/JWi\nEXYQMAmiE8TQjO8DSptFdZPoU1GRG3HAatUWtbrL6AhOYFCpAUvOxJe7Z7Qn\ntLHXuBAs/hEMSq2QMYFx9WEkcnX1MG8i8iniXK0etSoRhjZxtFkxP66Abu3N\nzO6G/QlItyuvikKKTF6672c5IWD7+oxRNmPWVYYcCtqKpn2aGGjb2HKrQ8FL\nmtPs\r\n=+oID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpJSSBlEMZl63+EZ5mM4KoERbGks8IQ38TX7dCm4N93AiEAqQFuevVxeP3uwhJcpR7vGq/Obi1JPbixTP92WGoAXnY="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-beta.2_1590253063271_0.32702941764787097"},"_hasShrinkwrap":false},"1.0.0-beta.3":{"name":"react-figma-ui","version":"1.0.0-beta.3","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8"},"devDependencies":{"@rollup/plugin-node-resolve":"^8.0.0","@storybook/addon-knobs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.0.4","@types/jest":"^25.2.3","@types/react":"^16.9.35","@typescript-eslint/parser":"^3.0.0","babel-loader":"^8.1.0","eslint":"7.1.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.2","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.6","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.1","rollup-plugin-terser":"^6.0.1","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.0.0","ts-loader":"^7.0.4","typescript":"^3.9.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/test/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/test/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"1281ff147991c6f7d67979c725fcb566ec123dda","_id":"react-figma-ui@1.0.0-beta.3","_nodeVersion":"12.10.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-fYmiM2wGXuL4SIaw61reJnrXAdJ/296qmhfVJRl66Ns907NveeEsW+SWpOOXv/RBxPIj5Q58945y8UJrJ1LNJw==","shasum":"53d9917b0dd8f150ea486cfb5e7c4939427b40a4","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-beta.3.tgz","fileCount":31,"unpackedSize":58698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeylEACRA9TVsSAnZWagAAN3sP/RCZW2a09NP4QOeuO/29\nCinb+91B3yQ1oFoIdARiUr3vk4hpcQdYhXVtCL9iw+pyifB9wIfAUXvAZHDG\nKBxrSKK5+jYYdPv5Qa8be0E8/yPWx/k0TWySA4t+Frh7YRXIhnp/aXO3bNNz\nsj/yFHEo+NV9PSutRBRj5MwK9yBXZSs5kobrWnFzovrrwbVGMhypWVvRUPdD\naB0I1Bt/I9jvei/zlXD435HOUc9vSYJkjSCxQxXgIRPDiP/yiFtNmliDzs+j\nLAeA2w/2n2rR2G2cj6IAgoH7Y3nNkWG+9PSdl6E1D9l5mDdzQUjKNElYX9YE\nPc2SpxhqjGIPmtDZ8bkMJ1VhrN7j+ozSqkxy+HfNdpzT3on316AS4QbeNZN/\nTGRHHsczSS6kP9UHggxl9kFFitZ7eOybSmwzKKPCIxo7LL+B1f+Re5d0lWja\n5sGMdNAKRWr9GXNOIIlWNuj++edCkJ2xtdPnGDydclU86fYtedMnkxm19IFN\n8EXS4x3Go6zQRvn8o6FdoRPGDGiKfFDmNmni+C0wVi6mrfsIDOSj4O+MCGeW\n97uXD2VyVy6DtZyvi+9mF7DgmUP66x4RYfnM37JQLAwhXz6FoEQDaaKVUStr\n+Uw2vClgDpv+pt8xy7soATENbeR+S0T/SeZQGtrNfxVRHkngX1bkVt8H11kd\nIytt\r\n=0EdI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeNi5t0jTPR8HhBcDVhGPRDa3RWP4EFrU6xH6nVKxubAiEAx9Gqp711D7F5BOwrIx6y+wFhgbWjb/8oiFP/qP4a4D0="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-beta.3_1590317311570_0.6357419203398604"},"_hasShrinkwrap":false},"1.0.0-beta.4":{"name":"react-figma-ui","version":"1.0.0-beta.4","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^8.0.1","@storybook/addon-knobs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.3.0","@types/jest":"^26.0.0","@types/react":"^16.9.38","@typescript-eslint/parser":"^3.3.0","babel-loader":"^8.1.0","eslint":"7.3.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.2","rollup-plugin-terser":"^6.1.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.1.1","ts-loader":"^7.0.5","typescript":"^3.9.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/test/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/test/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"9026e1ddc554f3ae0713de138796ac05f8289a48","_id":"react-figma-ui@1.0.0-beta.4","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-CfVZ58AYOQvzCnE0Tl+JORENPG9B3y0vfsHzz8tIYGOv3bFFyFJ3Vo4qdw+my9eJswyGfdH7wWkEbgX2liX8kQ==","shasum":"99094e795b60db5e2c40fe9165e6717035ca4163","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-beta.4.tgz","fileCount":30,"unpackedSize":58936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Kr3CRA9TVsSAnZWagAAHhQQAJlYKaBlMpmNPksrnrwn\npM1NmAcVxmQkVCVHvcp6b3mvMGaeWWh3yNhi0ze4c9H86ChhxdBNdznEEYXI\nwQW1GWbK1bgcCBAFnOAeQMIVX+yTXnZtt+lTmRtSJz/C/3vY1x/i69qI/nYL\n3XfbAYdCyOkDbrOrUVczXMo8gFtZWJ69l+lywZy22UxlffskTHOdHXzOjaJW\nOA4O0BlZoN2oKW0MRldJpsJyUnHbmA6z0AB0qbwLvFLmeQGr9j4i3J9jwvjV\nwv5UQAVIhgkHUlayZqynasmGuF25uQDLLRjxZ2y/GzMi1ltnY7/gr+IEPoY4\noxW1AgHWNNHmZ7W98Kq/dYFRrv9ozFLNXMD045jdvNXrqBvOlbfcf4I03sbv\njqLHyJ55XjA/UlFzgMHiSc1TFx9mpRgaalM3hsgQ13LeAAYLdZpYXCOdH7j1\nM4y7lbmJ+cG3+YnwiLzXkmajuFPwQLVh2vHZAs+JpnI26R/HegvvMYpeaf1M\nrds6+s04oVKUbjBPzeduMMRxvSVbpRaqgxqTIQfuKnqPu970uOqKnkF2epLV\nSyZJxcl9M4UjALuCgCW973QaAp+8yo7hgypOGv4pPdXEtkXE8xIvEBMyqovp\nV0/+Iw6QLeDJ+3YMwH5sczEQlI8v84NCfgLJNWTbqh45QF5tv3IZTvdAzrlo\n6Ulr\r\n=eiNJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAr4YSGY3+S/ZQ2DAL4XzaF2eNp1hM5u0Qb53cXFzMfQIhAM/LMhqOkqsCxOyNk2Fdho9luoBwqCEZHSkTc98kb3fn"}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-beta.4_1592830710656_0.21508248583373324"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"react-figma-ui","version":"1.0.0-beta.5","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^8.0.1","@storybook/addon-knobs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.3.0","@types/jest":"^26.0.0","@types/react":"^16.9.38","@typescript-eslint/parser":"^3.3.0","babel-loader":"^8.1.0","eslint":"7.3.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"^4.2.5","jest":"^26.0.1","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.2","rollup-plugin-terser":"^6.1.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.1.1","ts-loader":"^7.0.5","typescript":"^3.9.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/test/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/test/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"7936806d13f7ef237d9f3259f1383d07ca7cb36b","_id":"react-figma-ui@1.0.0-beta.5","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-VXF7/jhs9N/J8WgZPqc1BASGQ76L4fWohrwCqHaX4+QPPfjxFvhxqLZXgy0CCaMoY/MUSdItS4d0CfWdJ2tdXQ==","shasum":"220aa08f8ea9b29d984d7fe26d294f64d2b8e799","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-beta.5.tgz","fileCount":30,"unpackedSize":58952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8KuhCRA9TVsSAnZWagAAJkYP/iW7+7o0mee3ogkdjIvy\nfuq+/sORD24cBJ6VIJo+9I5UY8ZqwAmU/ef/ZEtEBsUrlblX8K3tOozk8Rsv\nZF2oHhwgFmiFMVErHu0OQ+30n94YrnDZe08EMbsXjMiAOLMrk7SqQ7iJrhYw\nfiO7VA459GZZUBwuQUETA14aS46W2t6E0IWzH/imYKWn4E+MaXjXczsTfuM9\nbiH2+oBkPlHLL/I2R5wWs9bD5sOFCtbSDDPAZRV6El+IFt7h1uAkKn+MtAVm\n2mXwA944WgXrHoFxchAyMjwzJ2enJP/htDBLG+QlT8bpXL8ePuvRuqcp3LVA\nRYdg4dqehjArKa/dsUHsOmC1gPRiB990QwMyUiCv04Gb51o+6RXTRgtNYeHP\n4u7xvNzueNhntpxc9twf3tAjrIod5o4Z/9X41i3Ca9GxaA3FIbGSIYLVw80V\npB2ocEtSUHTVubBw8e1wMhqgXPBDcydqqNwYhLK4oSSFEJtxn4a8gTCrdnzg\nH6Yuzv5hg2DPiMN8uQpl4iXndPT8WigVaYgxkBSqzYW3UgrkmdzDYqa4PYVg\n6wblRFyuMHoaUJRJzNe9lv1gtPOsqbQNFba1dRJBxQt1XiMIJVoFR/EfNNhh\nOGT/Ftnq4y7JNuGV1DplVpFmrRkPq2ma/FZK6F5ILd6n8jDkFaRCIWAowUzk\nfCrG\r\n=ANIp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR0CwkUu8KCUQKDMCm5f5hh1hXsR6gnTPDglC8XxtiqAIgKf2vdnFREQe/XnxT+FWtzcKnR67MQLF99XWnYPl5Vic="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-beta.5_1592830880936_0.6979011996548516"},"_hasShrinkwrap":false},"1.0.0-beta.6":{"name":"react-figma-ui","version":"1.0.0-beta.6","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^8.1.0","@storybook/addon-knobs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.4.2","@types/jest":"^26.0.3","@types/react":"^16.9.41","@typescript-eslint/parser":"^3.4.0","babel-loader":"^8.1.0","eslint":"7.3.1","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"^4.2.5","jest":"^26.1.0","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-postcss":"^3.1.2","rollup-plugin-terser":"^6.1.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.1.1","ts-loader":"^7.0.5","typescript":"^3.9.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"8ef9dcbabe56c645d23f765157c98bb5b9ea7853","_id":"react-figma-ui@1.0.0-beta.6","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-K5jDM3Dmlla4fLDNghgn2KUc/WLb8fLEOPmkqQ5ixU46lsWiKcKPjUrkahSHCoNJH3iwW8wPAWBvrvt7j0VvbQ==","shasum":"a1406c2df01f67e3c684a916687dbefec5fa276d","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-beta.6.tgz","fileCount":30,"unpackedSize":58957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe89b9CRA9TVsSAnZWagAA4NoP+wWR6sy5rpKNvlup9HBG\nMBHdE8AWsUCujPRNgPBceydIrbuKpot3Cm6EH8gYMy8YzxMW6hF/ykYpv286\nR5DfXmrkFnyCHAVVuAvijrrLq3Gom6YSihxe/MdQ+GmBRI3kXNzkkzRhtsP4\nonbC7Iqmn/CnCMMwEichDKafu8DPpGlz82hhQkJwyr7dpQd17S739hq4RS6g\nQQgspm7t8rZqtMHCJb7dAwsb6GpXLBdpIfUfwOAlcvH7mecQUkP3PJ+gxbtY\nJ2Y1ms2RBaEf0TsjF+8KDP48tLXKII2dPVBJlayBVPds1hbz5Ug+/dwdBQ0U\nRoFbZLPVAmBNOtFaAaUG8OpbKUAtWLr2XXdsOWHYbT8iRzdB0skLpBERnVNi\n9iffO64O4Ppa47YzsOWNn0q6ay8Dov+9AcvkOmB7G1jbZKZkxrkl1eMGUN1S\neT7gZB2LPn4KNEUKUMOcqwXPNAAPODfW+JBFjpCJtIaSmFgXuLkhDeLMc51I\ncWoVryx2q+EbAG9c/SGRDfAYTlaslN4rKhvE1sjQg+yj+o1jh5zxCd+iP7+y\nTiXx4+2df0cjuoCqVhHBBrkCnHB7Ztapf1RXXdmndbzfcLFj65sDzbrkmMls\nONz9IseAv6Y94JjwBBqCpnRvF2iQabZf4q2nXBz5s4a6WJZnc8iZKyDSphBX\n/fHy\r\n=47ym\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhqvPHgFT/yruHGvDdkqag0uCn3JHTCbsZV351vnOmnwIgGOZIs3gYW4HSVrx70yHLS4VzmiJQfgqlVj/reBDK1FE="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-beta.6_1593038589242_0.27615917496976605"},"_hasShrinkwrap":false},"1.0.0-beta.12":{"name":"react-figma-ui","version":"1.0.0-beta.12","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"release":"rimraf lib/* && npm run prettier && npm run lint && npm run build","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package"},"repository":{"type":"git","url":"git+https://github.com/jb1905/react-figma-ui.git"},"keywords":["Figma","ui","React","components","library"],"bugs":{"url":"https://github.com/jb1905/react-figma-ui/issues"},"homepage":"https://github.com/jb1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^8.4.0","@storybook/addon-knobs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/react":"^5.3.19","@storybook/storybook-deployer":"^2.8.6","@testing-library/react":"^10.4.7","@types/jest":"^26.0.7","@types/react":"^16.9.43","@typescript-eslint/parser":"^3.7.0","babel-loader":"^8.1.0","eslint":"7.5.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.4","eslint-plugin-react-hooks":"^4.0.8","husky":"^4.2.5","jest":"^26.1.0","lint-staged":"^10.2.11","patch-package":"^6.2.2","postinstall-postinstall":"^2.1.0","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.3","rollup-plugin-terser":"^6.1.0","rollup-plugin-typescript2":"^0.27.1","ts-jest":"^26.1.3","ts-loader":"^8.0.1","typescript":"^3.9.7"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/jb1905/react-figma-ui)\n\n[![NPM version](http://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](http://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n## Contents\n\n- [Demo](#demo)\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n| Param            | Description                  |\n| ---------------- | ---------------------------- |\n| `containerProps` | Props for checkbox container |\n| `labelProps`     | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureItem } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n<Disclosure\n  tips={tips}\n  render={({ heading, content, id }, index) => (\n    <DisclosureTip\n      heading={heading}\n      content={content}\n      section={index % 2 === 0}\n      expanded={index % 2 === 1}\n      key={id}\n    />\n  )}\n/>\n```\n\n#### Available options\n\n| Param      | Description                                   |\n| ---------- | --------------------------------------------- |\n| `section`  | Style label like a heading                    |\n| `expanded` | Add this option to have item expanded on load |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n<Onboarding iconProps={{ iconName: 'styles' }}>\n  Onboarding tip goes here.\n</Onboarding>\n```\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n<SelectMenu\n  options={options}\n  render={({ value, label }) => (\n    <SelectMenuOption value={value} key={value}>\n      {label}\n    </SelectMenuOption>\n  )}\n/>\n```\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"e9a8fe9cd7c30ef6001632bec2b8b4b82b5ffdf7","_id":"react-figma-ui@1.0.0-beta.12","_nodeVersion":"12.10.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-9rFz8QigFd0IaumabmCRMz8Dj+IU/5dOoJdGQ+7sM8Buhp5hAs0uf2fQssellHDfyX4NL0jzmW8htcnyoXPX9A==","shasum":"8a33f121e5fb71d48706f60a694d6da3ac6a9124","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0-beta.12.tgz","fileCount":30,"unpackedSize":59799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRqqbCRA9TVsSAnZWagAArC8P/RTqUsp5JQU/pJyQT+6U\nOoUNoLhwJDwG1bxG3akvlXJKvswbplO5YHp2GyCqCmx7uJIgtQJSP3ssTknB\nMv/73I10s7RbYsepBtmyPYaBkd2AzKb2jKgjoBGwI/m/CHhvnVP71Hi3XYPv\n1qy0BHwCQJJelemmJIsk687l9h748IUmCix7auokaYn2Ri8auO7MTk32dGKG\niWFJ9/8lXR++zb3IxLNgTIlUiIksIW2hDvgccMRfGb8ZDVsgt7DL93xSY5Vj\n2Bc1zNtpaZoezSr0XoG5nd7wFHxZ15g/xhzRkaqYEs8Jet5kKWjVEmsEsAjQ\nSRwY2XRr0ewjSCP9HYfKOdkEZi4tnuCOliFShoRx3Tj38xKAR6fAc5WVMGN8\ne4Hhsa2UbN6/M/sgFeILnVTdSRttgetmDB/IXNdHhA1JTGRKmKLkKds11F9/\n9KpoaDPPvXEBa/nhvAZfPYWYLa7RdBbYQx+3XZMnNSHeVhY45yvW/+fjK1fo\ndXJoNFHDbw1t9IhIPrFNp0hhELHJOSv5x8Wcatm0iiIFDTzU7uUAHIDz2LDD\nUjgOAqojpHEgvifvNbiZ2KVx7Q4ic1X+tY6bsUMb/Ph5thNTFam7Gsp80ufr\nBdIpAHPWhIglL4MLhjZVlF0w692JIBZFMEZB+MoGN4lOjDmHgUEiAV+/0DaW\nCED1\r\n=cx53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAtrlhK0PnTR9q8xlr/Ur6sIdqVg5pJXVMcB/hPg0aDAiEA0fVftCvoqZsPWWoMKzaBH/1hPemToFCYO/oFnEfG3Xg="}]},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0-beta.12_1598466714506_0.01229487526144002"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-figma-ui","version":"1.0.0","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^10.0.0","@storybook/addon-controls":"^6.0.28","@storybook/addon-docs":"^6.0.28","@storybook/addons":"^6.0.28","@storybook/react":"^6.0.28","@storybook/storybook-deployer":"^2.8.7","@testing-library/react":"^11.1.1","@types/jest":"^26.0.15","@types/react":"^16.9.55","@typescript-eslint/parser":"^4.6.1","babel-loader":"^8.1.0","cz-conventional-changelog":"3.3.0","eslint":"7.12.1","eslint-config-prettier":"^6.15.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.21.5","eslint-plugin-react-hooks":"^4.2.0","husky":"^4.3.0","jest":"^26.6.3","lint-staged":"^10.5.1","patch-package":"^6.2.2","postinstall-postinstall":"^2.1.0","prettier":"^2.1.2","react":"^16.14.0","react-dom":"^16.14.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.29.0","semantic-release":"^17.2.2","ts-jest":"^26.4.3","ts-loader":"^8.0.9","typescript":"^4.0.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"66946c694843e0ce78f801a353a7379afe4b92e3","_id":"react-figma-ui@1.0.0","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-To27W6VDUIqYtmhRvzsZltGdU8jVuq9uRLnTh1Pqi0dYFJkYFFbAEQTBpYQc8pavrm/JJQhWHvoudw9AE+Sjgg==","shasum":"aa34d26da6d1594b490e24a53ae575dfc4adc221","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.0.tgz","fileCount":30,"unpackedSize":61159,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsupsCRA9TVsSAnZWagAAYn8QAIss8XuP4w0rpEQGENZA\nGMJ5BVxg7WWdZcztVQN/0L3sLAakYqGNydkUd5/BrGUSC61dA09is0okZt9g\npmtPFlYqjeZVu1aMgKOFdXDxj8MEYjRrWo0aP/EieOCVB9XHDlHK6IOmLUR+\nebOQPUc/EjMWsaaCB0lR3wQMC8HO1I/HDt25qNTRQlgMVZdA9ZqhpMiz5F5l\nYjCRhPyYvmeq9o6KqP1/09ve5bpU5O0VB35z4BJQ2F5ZTWYDs1Rur+FrTS5R\nFEBtfACHNhLjpCn00wp9Ysg/gEXufQ1xZL0fDYc7OLXPnDusD62du4KNmvcZ\n/0Ofv+3qBBrbnn1/kLOfd45605J5YRSjhbfI93LmueexMa6rAkMq1NFwLULd\n2Y0ZXw9ipmDeNW4OHa5pwarwTwgqeduu5dQuwifTdV65OgcYzt/fc9ZhgnII\nITCaZd3/wEk/dSu1nbHEphi7+w14jPXoo6Xg+KFCLAG0I/bw+CME79GGy6UJ\nDwrCiP7HIkluMGx/VgopC7nTp5ptp5oyr3+H7pImRFUly96g0HJkJVZd6RDB\nFmu+xNihkIY9NsM2LkCsOmKRdKw3FQYv5L+9OeO7ECzZMMaZ6oEMlzyCTq7T\nAUWMy/8op3MF9/tLd97/mTwud411ghyEccWt6CfyItXQS8w1MyVWEnIoBevz\n6S0w\r\n=E3B9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpBichPsbL1Zds2RGGwpxDnuHagIO1SDOQsvtwd/b2/AiAqF+yJDw/S+NvmdZ6IqZ4/mBmzBd9TrltsgdfUeP1DAw=="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.0_1605560939831_0.43220632518727986"},"_hasShrinkwrap":false},"1.0.1-beta.2":{"name":"react-figma-ui","version":"1.0.1-beta.2","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","patch-package":"^6.2.2","postinstall-postinstall":"^2.1.0","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^10.0.0","@storybook/addon-controls":"^6.1.8","@storybook/addon-docs":"^6.1.8","@storybook/addons":"^6.1.8","@storybook/react":"^6.1.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/react":"^11.2.2","@types/jest":"^26.0.15","@types/react":"^17.0.0","@typescript-eslint/parser":"^4.8.2","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.21.5","eslint-plugin-react-hooks":"^4.2.0","husky":"^4.3.0","jest":"^26.6.3","lint-staged":"^10.5.2","prettier":"^2.2.0","react":"^16.14.0","react-dom":"^16.14.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.29.0","semantic-release":"^17.3.0","ts-jest":"^26.4.4","ts-loader":"^8.0.11","typescript":"^4.1.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"2bea968ed86a0912ec73f351ac7fa6f62548f69a","readme":"ERROR: No README data found!","_id":"react-figma-ui@1.0.1-beta.2","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-0w/1ZmtNiyt+REjXvDsnmm8hr7NHzRU84PZjeRoqjibrMnLhBDMOJud44Hdq/KOJ5JM3cMEne9wl7NTG6qcf3w==","shasum":"99367d567182544a2f9b7dc68ad183c6f14f070b","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.1-beta.2.tgz","fileCount":30,"unpackedSize":50910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwWnuCRA9TVsSAnZWagAAT70P/1HOUe2uhoFgZ7yZQkOX\ngccIb93jw27ETrFs6LWj1Fpx3d0LvEUEjQe/b3pbhNIEYat60OuSNfvnEVAe\nb/tN0A9vgoHYwVT2ftB4ZDII3lYMOfF665Sx8uOriooh9JPp6sPjPvPqEmQq\nWt7gtFjHR807ToLAXskB3u1fzmWOqiOD3WwxAfTaBr0oNbzXUsTdX6etAxnj\ndmY83qUeeeQbhlt56Kds1fwOtyYuwymJP8TJemLUpQloZsoCXdTdyOS0LGZx\n+7rjs509pjeMkNJItETVicJXZuQT+Jn40yTxoP7xMy/96wNkDqfwIaUNI03e\ntjaGFF/rSd1L91exUU5fGqpuRLJu73/NJrVhqTEd/+imLB6FtlvWaBS6Cohq\nbg3be2SN//SeXFJFoT96y0Fvsb7/0Y+yVlS9tX6AvgSJQ/mOURr2cWHeoO7L\nXiPb1FYpG7t9tqkSYhMOuYZy8H2kBDJtN6L5z7lF0ZqEQufkvyf+2LLGJ0Q6\na7Si9HgIPOpkw8XmZj+cGJ/BN26qeZ0dXWrC7pUtB7JMdY45kIrmprfwGFpQ\n0/J6v0NVs3EkXMJc9vWiAn9NSWY1BbTE1ApC5OcNfGc8sYsPn3Wy0NGc0b5N\n+5ma/QYI7O+ZUFLckWJG/VC7ZupWtEqFmdkO/dwTFDkyTHt4RoatjLdT+Xi/\nrTQJ\r\n=EvS/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHYW1jtDJaq4bVX7z9acJjPdoiJLtiL1FQsoGmz7ULgAIgQeLdKWeMXeQpOIOuiZc4mXhl6PdWLvyqG12wZzp8qZQ="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.1-beta.2_1606511086247_0.8776214204820281"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-figma-ui","version":"1.0.1","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","patch-package":"^6.2.2","postinstall-postinstall":"^2.1.0","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.0.0","@storybook/addon-controls":"^6.1.9","@storybook/addon-docs":"^6.1.9","@storybook/addons":"^6.1.9","@storybook/react":"^6.1.9","@storybook/storybook-deployer":"^2.8.7","@testing-library/react":"^11.2.2","@types/jest":"^26.0.16","@types/react":"^17.0.0","@typescript-eslint/parser":"^4.9.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.21.5","eslint-plugin-react-hooks":"^4.2.0","husky":"^4.3.0","jest":"^26.6.3","lint-staged":"^10.5.2","prettier":"^2.2.1","react":"^16.14.0","react-dom":"^16.14.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^3.1.8","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.29.0","semantic-release":"^17.3.0","ts-jest":"^26.4.4","ts-loader":"^8.0.11","typescript":"^4.1.2"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"f204f7aba38054b979506ff95d7868cfcc8255ff","_id":"react-figma-ui@1.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kHNhLFdEAdtJTqmaF9NPvJdkFk5z9/N6quRCQ3fYVt6hVrxJ5Fdl/LHPp7O/SaqggVNTfFXusnzuhb/irrAkww==","shasum":"737b2a870c21bc581bb431f68bc78173eea1cacf","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.0.1.tgz","fileCount":31,"unpackedSize":61925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyARvCRA9TVsSAnZWagAAM+wP/2kA6rXnNEXO8f5HKTRo\nJrbPJPpD/QVwygj4csZzvzDrp3Ju1UmHweHx9Dq3NoYtk2wLaMYQeYxn5JbL\nyNhv8GX+r8wQF8VexJiSdm+jJMWuS6Up8ItRmmdAAA64MBF4QRay/Yysl20L\n6UK8UtvlumQrAFHM1wSgpbro9DnSyMR9RmODXFPeWi/6h5gsxtu2kRloeixn\n+Dj9ndXcUSIbRgvP+4Q3n4vS2r/4OLVJERMHKyBoj0aoG1bSu9Eo0Y2cF99F\nm63ayU3FbGQ/468vCCHnlAT1RsoP9PmME+vgPCaXLbSBe9+tv0Ks99jgqXaq\nEweoQI42DcfpUyl1nS8s879ccFjVfkAwHCBXN9thslZe5VsIIbW8LYenHmIB\nSwmgq1BTgr6ssfOgJxED3ezOX2rRob9kgvxDjNonEVyn9Zdkb+ZxHzv078HA\nb4xdPHLVB+P/egE3AnaRAQMc70UbfswMMrtYlkf81w3ywtEOglFVQtALrxn2\noYQeBVtTIZFjFe0qohZ6OHBHPvsyFsANryQ4kprJgMy2IfG8BVIuC4/LjVJw\nPc9upMo9QkZMjfnclgOVvuCqspYVLwSl8KXj3gcCyaHNiPsvzxxrNIgSnP8k\niHeZjG7g0oqxmxJo/YJ7r7V9/lHiHgTuLBfm0+mAEcXU9IzOFMJF8V3loFOj\nqYGy\r\n=6t6o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2m4lZPotIKw6CJDm7LqCfmmPP110SwEQCSVBlV8kNCAiBgjflz941mHiNPtlSMBrBal0qU5DUW65BicOmVnUF73A=="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.0.1_1606943855409_0.2267633437550043"},"_hasShrinkwrap":false},"1.1.0-beta.1":{"name":"react-figma-ui","version":"1.1.0-beta.1","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","patch-package":"^6.4.6","postinstall-postinstall":"^2.1.0","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.0","@storybook/addon-controls":"^6.1.21","@storybook/addon-docs":"^6.1.21","@storybook/addon-storysource":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/react":"^6.1.21","@storybook/storybook-deployer":"^2.8.7","@testing-library/react":"^11.2.5","@types/jest":"^26.0.20","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.16.1","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.21.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","eslint-plugin-react-hooks":"^4.2.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","prettier":"^2.2.1","react":"^17.0.1","react-dom":"^17.0.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.1","ts-jest":"^26.5.3","ts-loader":"^8.0.17","typescript":"^4.2.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [Demo](#demo)\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n<Disclosure\n  tips={tips}\n  render={({ heading, content, id }, index) => (\n    <DisclosureTip\n      heading={heading}\n      content={content}\n      section={index % 2 === 0}\n      expanded={index % 2 === 1}\n      key={id}\n    />\n  )}\n/>\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n<Onboarding iconProps={{ iconName: 'styles' }}>\n  Onboarding tip goes here.\n</Onboarding>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n<SelectMenu\n  options={options}\n  render={({ value, label }) => (\n    <SelectMenuOption value={value} key={value}>\n      {label}\n    </SelectMenuOption>\n  )}\n/>\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"e0cf71c52621b32482d63e6a5189cd9e99061efb","_id":"react-figma-ui@1.1.0-beta.1","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-bt6VOrmGGOODOPxFoaL4TVCRIAT2kQGDL6v0vyyDFtLxTf977xtYHQyMZO0DxQSS6803KVLK7dnmG82yM9SXVg==","shasum":"300aef62c3a7508c3f02015ea11842f52194f9f1","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-beta.1.tgz","fileCount":31,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/FpCRA9TVsSAnZWagAACfgQAKL27FZ1p6AHWlVgNKeC\nHzyZnswMRqTkoTtgd3vJAxvZK0Nzz4tlkEwx2fth6gmzDZchPxmenLo9sapl\nSJHJaackfLaXwF0VGo4WE0k5bhXGCB7lukhMxwHExhv/yqqm8xbUStjDH7pr\nP8BYSkA/hqtzf6dYkRF47D4VMxLtnuLrmnJsF2W6AKwFMWjrJRydLWhMb48V\nnATA3tsTZ7ZPAedfBk2/xr+tMCiXJyvaVraJ7Xcqri/HAHWpMz9AkY4s4tOK\n1F7TjVCWNc4FR4EApLjAdOHg3wknhaBO5kGyE8UV7VY36GuUlW08hxn3LQYu\ng11OFnkgWVCNeqYXgYNMzF2yNk4/LYteojzADI3jUJF9G1gjyK7AXNgyceno\n5wU0Lnq0aLZFXAbFoqb6uTHSdL/nOScjsqNNpr5N1DIyjNGzYnSHAB92GxFo\nYph9vjS2ZY7QskWfvxnASsHcqo9YosQphpqnG1IeLNhmMA17czPCWI4XtnU0\nBYSvmHXjLlvZZonz0oQ0poBzfFHJp056Yi576mMbmbYcbTf0Aud2/sHvJu47\ntu+DP8eNmKV72pfQhp/IucMqQCk6szlgiHzdLMAbeIErsJoxz8zEEIN0Y1Cg\nxh8IlI3bBcEzoUQClgZff6qa2EoYTeDE8qohok7BWU86J9VmQpdH+1qnAPXw\nX+EL\r\n=hb4h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8/75d4xPAycDkSQ4WTtKdnwcqMJ3PxvehYx0vv/MaSAiEA9+j4hBpuDlCmbfZ3W+wJpkQWrSWZyNk6lEJddgSIzG0="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-beta.1_1615327592973_0.05018309757910777"},"_hasShrinkwrap":false},"2.0.0-alpha.1":{"name":"react-figma-ui","version":"2.0.0-alpha.1","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"figma-plugin-ds":"^0.1.8","patch-package":"^6.4.6","postinstall-postinstall":"^2.1.0","s-trimmer":"^1.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.0","@storybook/addon-controls":"^6.1.21","@storybook/addon-docs":"^6.1.21","@storybook/addon-storysource":"^6.1.21","@storybook/addons":"^6.1.21","@storybook/react":"^6.1.21","@storybook/storybook-deployer":"^2.8.7","@testing-library/react":"^11.2.5","@types/jest":"^26.0.20","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.16.1","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.21.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","eslint-plugin-react-hooks":"^4.2.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","prettier":"^2.2.1","react":"^17.0.1","react-dom":"^17.0.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.1","ts-jest":"^26.5.3","ts-loader":"^8.0.17","typescript":"^4.2.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"920216dceb79ed15274a8a74331cd37915ae9805","readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [Demo](#demo)\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureItem } from 'react-figma-ui';\n\n// Example items\nconst items = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n<Disclosure\n  items={items}\n  render={({ heading, content, id }, index) => (\n    <DisclosureItem\n      heading={heading}\n      content={content}\n      section={index % 2 === 0}\n      expanded={index % 2 === 1}\n      key={id}\n    />\n  )}\n/>;\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                     |\n| -------- | ------------------------------- |\n| `items`  | Array with disclosure items     |\n| `render` | Render props for DisclosureItem |\n\n**DisclosureItem**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { OnboardingTip } from 'react-figma-ui';\n\n<OnboardingTip iconProps={{ iconName: 'styles' }}>\n  Onboarding tip goes here.\n</OnboardingTip>;\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n<SelectMenu\n  options={options}\n  render={({ value, label }) => (\n    <SelectMenuOption value={value} key={value}>\n      {label}\n    </SelectMenuOption>\n  )}\n/>;\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","_id":"react-figma-ui@2.0.0-alpha.1","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-FQvJIh4jy0M5XTrH9/RgyA83tNMqGCZeF4C7xY1KoHhmmr2AoC7nwUC1GsS2hqUYNGhodO7D23k6r4hG+pe8lA==","shasum":"9b9c549c40efe2a001e3dbd8b0f66521fe41acdd","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-2.0.0-alpha.1.tgz","fileCount":31,"unpackedSize":71133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/LOCRA9TVsSAnZWagAA9VwP/3ARABvitzJ9jJsmKk8g\nAKoW+xI23tqcYKAa3l3wsVj3oidz/jkpgNjJB+m1ReKnfIjIGj2XTRepg5GP\n+XuHHxBu8QJIIvh4R1q/tE/1t89uofeICwqloxN6fVn4FmXL8Qhkwd50d+1q\n3FUq8FGbg3nBpmIE9+3tq0bw0+P7jVSwMnt1sYPnBsvXW27xn8w0E1tjN4h+\nOk0o4YcqZjes3vfp+HwmERrwUyjXK5Tl2QJJAcUCS5p+4EUCRdZReCL+mKV2\n4zYj41O2L8/GMUbnK/q3+aa+uruMrCh4+hG8pePf3x/XqAJLzCUrtr98flPL\nSikZmwBN1e33mcEWLwcUpkTOYP56orIQVVP6ruYE/3Dhf+/d1zx2+BkShAhE\nGLBqDeNgInsoSj1m3tLEfDrTHgdhITXTC06xLRQdo2cDNnPbL94PWv04brUG\nIbhLlVRveOPRQNkp1nMt6lwu21Cp80lJNYOFfrjWDJa8Gp08G59h6KBHQ7RO\nXXsxqxQ01yxo8uHdj3O4D0yL3gHDLgzH08TlG4MWgMGraLnLg4rylfLuKM0x\nkxQljYKCefAWTfUAFDU5VmxODIw6AB1VYKaT7C2/uubcKXl3doxuEnSUy7dC\naks+vEOpF52g8aDXZp4j9SjwxR++nN3iBgCjMaK1fw8HM6r10nzC6+DtGLCz\nk5eE\r\n=51E3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQV9+CVctGfGnS4QC2xvwVH1sv1krIYtVoptGUcK578QIgctEYNpnDWQf0PoQLZkG3yRiqDdfYJMs8bqlZFTu18+w="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_2.0.0-alpha.1_1615327950134_0.8056575362338132"},"_hasShrinkwrap":false},"1.1.0-experiment.1":{"name":"react-figma-ui","version":"1.1.0-experiment.1","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","figma-plugin-ds":"^0.1.8","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postcss":"^8.2.10","postinstall-postinstall":"^2.1.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6ef141b224788e23be00ce12096a3c948e16a1a7","_id":"react-figma-ui@1.1.0-experiment.1","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-mNxDarWbEnbWL+fE+BYf+6VNVnWDSwYh7Y7fb4ZB2RtSEXBVHcKC5NY6PwaJ7g26R71zzz9UUVccPOSTMIhaxQ==","shasum":"00ce19d22500029610a0b9fcadc14be1b29ce701","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.1.tgz","fileCount":31,"unpackedSize":296921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJge0hwCRA9TVsSAnZWagAA/CEQAITrlzGfm4F2GLzipF55\nkXUvN8ls+hUSmrXl2gEFXqdISbUiOC/8AtaRVesnHz4oZmDUfsR0Cg5kCg9F\n4uR/Hu2DiSqq41c1Bov0bWO+8Ot2yfGJ67IYflJsZT/DDpX7W1sSPkw/43mT\naXRy27jD0FweYRiwAfFiJfaKyak9DYzRo8oP9PZyOak7FHXPVMp3vCQ8wFkB\nY3NxcEctESgRjRJfwU6Z3Dw4aDvDiO0hbg/FZ5cq7ExUQWguLpIYIOLMwMee\nlJ76AMtClJYsNP3XPVpAObjfYphYn1yKrZZ2yduYauTxa/+ajb422z9d+Htj\nHRwOa+zmGbjg3Lsz/eSN31LBlkJJ6a8XXmxvORVcx/AJjn2o5k9mN5Cu+Put\nTQVs4F7TS/4BNQLwzVdSC2SRWj/jMruPH2Y360+wmH9bd6az3B4t7A6jykIR\ng/rR2M7dugiNzbNUWEA3kiT2xXWy3aPBByuKvDwbUqUIBZYSv3ldBqQmhEIJ\n0jHUGtnK3FPPRoAidrj1fTJ0mZDE/CPFoUXbCDp7SQljZ3n64WK6xXM3vGRF\nOgTMQmooAn+VwxBe5ziOFscXV6PAWUNN03LrmGnIMYoBhNIqQsBV5V2/zpcl\nypDxEwPLODR98wMmFINb4+on1tiAvwUeFfl6DAB6gqfsNt+OMncRjjGEy26j\nWyD4\r\n=GbEE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2TdxvvUyKjVcZp3sOp9pzoCvKIn68HpKx0WDuWIQH1gIhANCAQQE0RtDeKR71K3AkVYK5dvHxr8wwMFKHeJT0AZAA"}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.1_1618692207503_0.18665951216706556"},"_hasShrinkwrap":false},"1.1.0-experiment.2":{"name":"react-figma-ui","version":"1.1.0-experiment.2","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","figma-plugin-ds":"^0.1.8","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postcss":"^8.2.10","postinstall-postinstall":"^2.1.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6ef141b224788e23be00ce12096a3c948e16a1a7","_id":"react-figma-ui@1.1.0-experiment.2","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Ra+MArqjRjHANts7nvWom6bkBT+6Rz5Nhf/PG7BO+um6uxoMbWKI003N4fOqAKlVHlCiNGle/RiBmQckg0zbsg==","shasum":"2edcb5796d93fbb5cea22460a551db65e7fe4e00","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.2.tgz","fileCount":32,"unpackedSize":297195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJge/y3CRA9TVsSAnZWagAAQ9EP/0U3EPffazBMmISlX69p\n6Q8CdMbc8j8woTpossNgI697BjYP5HdW8W42OgfJ4Fysf4r4qP3WTSDnkCbl\npkeGFGpd69HrV5Jkyaga7wn4R1XZRfjUmdzyvjdfWNw7tTQBMHvKrRHsiEHG\n6TK13LsvTuYfAlIMcpi05Dcvih2mPmgjk3cbRnLPEOhEfpL1Uo5iNH8ks1y5\niDqxoK+nWLdrvnJVZ6NSlTUTJV9UZI7xpCxm8yRRoaTHnpYbffCt4nnJNd1M\nczYESxkv8x8t0kz9ds6j1X1cICXBtescyAhqv2q5i/F1d+YJ68/YvZNSTU2e\n9Vd4u+htlKBr4Y6xBEUILtN2ss40ivotsBQ9ms78ymsZa3gnxmFYxLBrNVQq\ns8h32D6qn2cs+oqqHiw8n2JR0IagdCuFbU66dkiz185l1cdeBV8qNyxb2xvP\nTqHolNcpZgEQ8fQwKz4+NsmQUf1XIb24VuWc49qqwarXcTL9YdcpD6Fsy6J7\nPsWENrnZtQKILioWL3m8W2Lr41I1PnuGxytoLHkRL0dPYNxbrnILQXLkuz6v\nHozYPsnCL1OXysr21wmaeXoNJYv9P3iwjUs9XVzwFpE1BurvMnnut9paxMOB\nTIvMozC2sLfJKbrrWbt4pUh/lNMohXpLsw54qD5aUBdF7qF4noQqht30fz89\n4L+x\r\n=TX5p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp3/sVgGemffrJwrMezCwazi8GMu1PRkDwR+wtVjsVJAIhAOiViolnmnX62eroP0CR/HGhJtDJISHoEMZBLTs63YO7"}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.2_1618738358495_0.17031760522419703"},"_hasShrinkwrap":false},"1.1.0-experiment.3":{"name":"react-figma-ui","version":"1.1.0-experiment.3","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","figma-plugin-ds":"^0.1.8","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postcss":"^8.2.10","postinstall-postinstall":"^2.1.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6ef141b224788e23be00ce12096a3c948e16a1a7","_id":"react-figma-ui@1.1.0-experiment.3","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-7ASjLnHbaBDGzTQvUEBM4kEQU8dwnaS2fyXgRUTb9UBiLcSwrtFoBzIi8wakXX9HTxL4vnFgkRdAsm7H/Ki8hQ==","shasum":"4a1aef441b94cce98beb25e4a932dabd8d114cd1","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.3.tgz","fileCount":31,"unpackedSize":126243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJge/38CRA9TVsSAnZWagAAJZIP/ja19ftTdCLtTMjvJBOj\n+xCiGtHU7GfRhntZBmNZbFVagubLA1h3k94cnn4Ai+1ZGNhzd/Mr1ZGoQsvK\nCWxC8Vkp7zl/v3d/FAri6OMcWkBNAq0MdIwYP0Ge5lczAOdwd91m2I2eR/73\n3U9Bm2r7xp6e1lZeVlYzZKmc6dt78SPe+lxcS4BFcJMh5/bp+yNjpfKPPASU\nb3Pv77FidP/0GTllUqZ7TmbJlKiuG0T6YXNUJkiWgk6m/kJcBl5qCO46gZwF\nxTKuD6Cr1FBfNmwWu2vuKZshiO6X8YOLSam66MXZO6eiypOkekk8FCb4tTU9\nv/6S0HtIH+24Png9nQAAI3cnbYGtfN4S0ESuI92b30cEj4l+juw0o/V8UC/l\nt3ypfoO+1kdRqqFS9JCLZdsK7dOB/6ulWAAtCCQIOfJeDeLYAKlt5g6VYkwR\n6lF/fn8x3fTuv5xd9UEP6q9JLIKojCVFud1F6s2l0pXqSJfuVba+QEZF3FCY\nMrebDzK+Bw+ySFhiMltRNoyPN/ZFaQWISr3omcOhzfluu/UADK0a4YxL5cjI\nTJh1Zm2mq0RP6VFwxOTbX4QsO2+whmSJEYu/1IzaDu1czxyDI5ZlKfzznO+r\nKPFiyp+tXaa50gjYhTar1IXPzEtU4W+bnMjFfqP3eiRfo2hIJW9i1AJckS9P\ntjT4\r\n=/OSR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMJ14lxwSi8CDMj4D0gLP6yWsre0pbLwR6oIU87Xz0UAiEA8lMpgAq0AiQVWatE1tyh8AhONMNybLcLrv5/6nYA3DI="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.3_1618738683568_0.9261633707061265"},"_hasShrinkwrap":false},"1.1.0-experiment.4":{"name":"react-figma-ui","version":"1.1.0-experiment.4","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","//postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^0.1.8"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postinstall-postinstall":"^2.1.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"6ef141b224788e23be00ce12096a3c948e16a1a7","readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","_id":"react-figma-ui@1.1.0-experiment.4","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-jAkIXHYs6+j3y5k9GHBM75vReaI+XwfxaQQ3eQQF7CcA8pPcX5FokkbfrVf7XpU8OH4MUw5s9Uy/w+1B5Yo4Tw==","shasum":"aace246e7f3d7f5608a0f94f935f8d457df2992a","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.4.tgz","fileCount":31,"unpackedSize":71565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJge/83CRA9TVsSAnZWagAA0KEP/2LrwXHMdvvEwYlMrQNd\nIxgo55RCdJmPozVHK6M2uQMpgbu/lvDU5eKGhwLFADC7Ax7sYEYdOyeYw3ix\ng7Vsf7XgJ176SweoU6LwVA0bjxoaeGL5h0gvvNMiUm0lA5eeoyJOVywtOd62\nLTeTc2MjnzP2ScM7lcbBQT4UPKpY+DtbxDXZEf93x0jE/jCoEGaYt4XTAh/5\nfqwUiiAK6dsIKv1efRmrV2FPxhjdFjN58f4P7iJv8W98VW+SNrXwbBGCk3+e\nz5qo+oTFQ9eylIMsWKB2IguqHvR7hecyJROqVmrJPf0X4KGi7GGNbnGG45Hp\nTiJMuJk+ImWNhfcNoO1wHKDeL3b1vekQzPJpJnR+YiHMfTRBUy2Qk5jw3L3k\nHqyRrS47Hsbj/Vq5VZnIOjhmKSZC+RyO4reibLfnHV9gwDqoJtJqo7tRHYAM\nGsBAacUGWn83aE4x4jQ3pif0MndypbXpfokUUrKBe3CQ2912HKAFUo5uX91d\n/NPbPH15Jr2iEWIsis8ggJyMVzgk0yrNlS/ACZ8k7/TnJCRJlbSkWmSIL8R2\nsygZriNNE/00SX9036rXWSQqWIKcJDRqDJicB3TYCbiO63CUjzvWNyKJqvNd\n8r+GXj2TPggXhCoRZa9CBwLUW0GqZ4HcMqIPANUkn9HLiCTYZDWelllWlPw3\nWZK1\r\n=4XMa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1S29xbrzXR3I2eHKZmN0qpI9unMw6js5r9fGqA5aOmgIhAMknVoaU2jgL3fezrQ0LoTBxR/lL8qjZ/WpvFmwYJWSq"}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.4_1618738998542_0.9060123754328309"},"_hasShrinkwrap":false},"1.1.0-experiment.5":{"name":"react-figma-ui","version":"1.1.0-experiment.5","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","//postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^0.1.8"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postinstall-postinstall":"^2.1.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6ef141b224788e23be00ce12096a3c948e16a1a7","_id":"react-figma-ui@1.1.0-experiment.5","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-FeyHPeFD1V6h/O19SS7JBAoxjHMemQaVWn8eHy+Xk1iLATO4tJXAMECqVUSIoY3Kon//PooZZ4L6EeoQy/G3nw==","shasum":"c5b495405d43a0dee552c9143a082ba6133d5788","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.5.tgz","fileCount":31,"unpackedSize":75532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfAABCRA9TVsSAnZWagAA2mcQAJaFAdX2BvYu9gmPBq6B\nGVf6bcle4PmnhdO/ZY9HJGM0TYq6Fh1m9Hf/XYFsAC+DhUXYGN5aHYWRomY0\nVSX6RlWu+TLhhRKtgeCZKIKmfvCTuAVqC+OXfwYer3cEREgAXjyzwAD08NFn\n54jfxO++IuRefejl9Q5vPz2zWjeTxLICUD1r2qpd4J3pqdHouQIDs/FvoWP0\nGC1epEjO1AaCTF49iFJVCw9SO8jLRziQOwlFezRwS4cxxNiDPMGa8rwl/Eg+\nb6L3eKpbM7pf3SFsP7QTqekVc2HXT6XB0xGHkfFyiNatixh0/R2hCHlmRgpl\nkdynP/fLVCjQpS0FLC5/KSR0tkhSZKV104Gl1SmF5pS51BfgREyF3XI87BLN\n7eW9lBx9pHnLs6ECcSUyfSQbNqB1PrIt8jmhk2UrqFYgV8Py04Lj1T46Xs5f\nHU4iXVXhauvRA4PerxybbLPDsouHW+8QWM0uYvO/OKSXyeTI6yGib9fb58xF\nSXGVq1MHnuVsacRu2N4+CLBDZN3DtevDvLd20Gnfbk0tVF6DsrtDqFdOc6WT\nYJSpLmjE0EyEENWYiNfsjsH91Ia+KtOMtRn31FNHRuIGKivmrQapn8D3xnUE\nX/vBKSLBzAfOUv1TBR9NC66m6aCyxfytEX56zkUtWbVR6F6GuNrP3L/5HEqR\nJ0He\r\n=17G3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC97C+6FUyj5pl6VSMY+tlBo/6MC1RAXvnE1atYzEZoeAiBvXdPlQaOxbbXU+zO7ZaajvMjQy3kryxqmvF2coI68ug=="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.5_1618739200819_0.6513139129331476"},"_hasShrinkwrap":false},"1.1.0-experiment.6":{"name":"react-figma-ui","version":"1.1.0-experiment.6","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","//postinstall":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^0.1.8"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postinstall-postinstall":"^2.1.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"6ef141b224788e23be00ce12096a3c948e16a1a7","_id":"react-figma-ui@1.1.0-experiment.6","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-VoAUQ+F3T/L91KA6xBSj4sxqoJQFScamgdhDmJu+eZFTG4JssXhmiVVrH/QEwXZHBHz1uJLbatRXSt6JpchBPg==","shasum":"6925a40c5137d58827d93207f431579b8af2e7f0","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.6.tgz","fileCount":31,"unpackedSize":126255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfAEgCRA9TVsSAnZWagAAWpcQAJDcTidPx2ZpB4IewXYE\nadgTIoo8IK/MlhJzW8FISGXttuhPny/PG3itUW6QDacUfzRffLl/dqRzFLXb\njK7PTS1n7g+x7Xn/P3S/vRHcnwsCPTAMkUiu+OkJhRdfBWyZM8z2v+cMISA6\ntSJeTStVE61YrNiOyGht3pQjNiKLAH5pW8g+J2yn8NnSpWd3luQlUycsAOp9\nU/Eb2BSmoLnoiuQ7IQnF5c/5bZeU6AWHS025afKFTyQLEHNgcY1KDeHZo+B7\nUoDKaY+iqpAX5kbfZlqdSoQoQLqqiWxfOQki8A9fKZX+7VYhg28UcsS1ji/m\nYbC56yt31PcQZ/TLCwjINn2TkIky2VMeBW/iFx2k2KdfDcrrKgvoym7Var/8\nDyNp/6vZpEwTtRHH1pEdiQQU2wdjKo42GU59MSCHj7EcmIJMmucBmr0GvpjP\nOLudLE0jG2qC32xA9d7lt0/0WyVMPJJKCUrwqpwntruvLbLOU9OJFaGE7gFr\nKrWtURTSILNqcto24oAWiEQIdseRpUdeO8C75GZLKe4oWR3xY4uY27uqovze\nuQ/5t3v4KcxwDXgAj9976Nu8e89SDfKY3s0TBVQk35I5lZKraxEynmJVTVfo\nYd5UJjZLQBJZe3xKTGyc/W4Q62cZFGk+/4KKn95gIC9vEKQd72CGHMN4wCRT\nzMZG\r\n=xhHu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMmobfwip9D0sgM+EJMjCG8cvGnLl3r1YgSZfYF04bFAiA5vzV7nenKOobry8YAAflWSoZ3f9QugaFRyO3/pt1D7Q=="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.6_1618739487720_0.038290444174649885"},"_hasShrinkwrap":false},"1.1.0-experiment.8":{"name":"react-figma-ui","version":"1.1.0-experiment.8","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","prepare":"patch-package","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^0.1.8"},"devDependencies":{"@rollup/plugin-node-resolve":"^11.2.1","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.11.10","@testing-library/react":"^11.2.6","@types/jest":"^26.0.22","@types/react":"^17.0.3","@typescript-eslint/parser":"^4.22.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.24.0","eslint-config-prettier":"^8.2.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","patch-package":"^6.4.7","postinstall-prepare":"^2.0.0","prettier":"^2.2.1","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.2","ts-jest":"^26.5.5","ts-loader":"^8.1.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"9e75a0ee44ca62cbbe60d948121ddb1de0be62c7","readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.org/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","_id":"react-figma-ui@1.1.0-experiment.8","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-hQkA98RXlBULGkdmfL+/OistPVItbrlCUuLo53EGnOeuKGgUD1pRH00Wi/MROKKJrD3RYfeA5aC34XwIswAz5Q==","shasum":"6d8518a4aa079afae33f13f586fbff096c632d77","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-experiment.8.tgz","fileCount":31,"unpackedSize":126245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfA0ACRA9TVsSAnZWagAAwUMP/3komfJayFjivox6PJji\nFi2xp8KJHcaij1mayoxGa2WqeM3RZt94rOSAHOKIle2Fi6InCeVhu1jfgRD0\nwGIzx4iB9g5bsVMiK07wrYmVqdzz3ExL9CFSPu/UECDFO0LwD2nmV371fsqV\nX51Mdf3tm35V3JraYJeKPK3gMKAHH2XqU3JLgKUIqpDxUXCzwfHrmNrz557K\ncP/9RZ5JzjW3JdWS6nEGse1wR4SOfPL9LLqElWNktIGJLCt2X+PjpZiUhCZU\n8jxJpaJ/LJiHVVEQCEY4cmNAQ/XdHB6vONOdeH0NitiwVOlO6jXIvb8k4oeC\nHu7cXQ2v1tru3gSQ8dWLNyXyOILqQhT0W+sTXIMMHJ5w4TCr7mMDiFztq6KR\nRRgE8Y5IoG5rA7uA6xYwiZaVoB44AtRDPArKZ/lbCRbwkH/oz42tS51VzAm8\nvba9Rib1bKjc0QhX6infmfABH2hZf6d9NhL5TlQ65193TnhHQNLuEF8MoV6D\nz41xonE206dCHQzVbsPahHNsb1NFr5jRsRbl41zFDvSs5MjSFV68APlOkzQA\nq0mShtr40TH/IE2hC5NjylT8uz0yzyVFzHMa7ojB+rjT+LVWBtg/250Jhbdu\nPfR1Nvc//Divgft6rY/T0TY+Qjmn9bNeNNvR0K4bu9dAQYojO1I5yIpVKa5V\nWpWL\r\n=yQtE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKFAF2qfwpzuMnlLipdkCxq2urpTgWJXfmD3VQiISP+gIgDKNHDQTeB5GmSWkuo8n059LMavLZh7RLkb/NULrkXD0="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-experiment.8_1618742528050_0.5744234824698675"},"_hasShrinkwrap":false},"1.1.0-beta.3":{"name":"react-figma-ui","version":"1.1.0-beta.3","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^1.0.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@types/jest":"^26.0.23","@types/react":"^17.0.5","@typescript-eslint/parser":"^4.23.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.26.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^11.0.0","prettier":"^2.3.0","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.3","ts-jest":"^26.5.6","ts-loader":"^9.1.2","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/com/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.com/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"7f5fa1f8dbe209f65ae972619ef7cdb6e4ee087e","_id":"react-figma-ui@1.1.0-beta.3","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-rUtxRet13uw0Ki5iou4meOp2OklifKajtFKiQRP9nNxZYwpXkY1onhDdwhjPHOqYcFzcLjSwIxUstvhY3BshkA==","shasum":"340383742cca73caabcf308507767051c33866b0","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-beta.3.tgz","fileCount":30,"unpackedSize":70651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoZa0CRA9TVsSAnZWagAAejIP/ROUzTqq1f/+L4l9/10z\n9ilAg96swS4beR84wB4ea+AA8lpy7PvKveGSd16ILlyrhSonZRFqhIn98M6O\neLAtCA4JNQhjDVntPwYeqlqYXmiO0jBDnFrO6yHFEp4Sn+0Y+lR8uR2qpGBb\nEuI0/x0bjyRgW56sK/3FpXFGegDvkuVBYOeQlNYVoz97xG+KIQGKUPEAPdq3\nkKX1crSoJM/gXGsaEF2TUR+bilzs5CVV4T1KyIhzZxGz52rZJyxV3qfvpFXo\nvuStsPIfkGwU8T+1ca746Uj/5sUQqpv6eFgZfUwPs9Ip7qi500/T0qP3XDNM\nUBYnK1839nnHLUtOWJUY36EfYovepn2s86Jsxr4zcB/gYKFaK/d7T4VvBP7O\n15pMNY0VfSQlY4jUYfLULkRleMAARtpjyjnlvHE8fHM7Ki0BtrcwmPUlEHeC\n7m22cBDIIcLHd9u5NrMpDfHonYl86INRumUxzOijtNh2qjln0tuivu3FtkLF\nh+cT81AXActdt7RPmN2eTOesv+K7jnMwJOggoWKuITOkbiJmlAjA5cbX8vrO\nIa2AztcLQTruc8fGrWgjw0XDLxWfn07bZ1U5ZoPAR42kyO3qI/DP9COkmj9G\nxFnrLNtglT3mkzpHsI+KdpYxfOeMGB3Yij6hupNrHWhblSJ+Acw6dwgs62BA\ncT2z\r\n=1xeV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlazq9oFTHQgZUB8AbLYwvpg1FjYp6f1XC+Xe1tUkvvQIgBodtHv99kWYkG8yvN5hrCSraF3w6a8yiULohMr0SmR0="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-beta.3_1621202611474_0.049121743951464625"},"_hasShrinkwrap":false},"1.1.0-beta.4":{"name":"react-figma-ui","version":"1.1.0-beta.4","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"1.0.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@types/jest":"^26.0.23","@types/react":"^17.0.5","@typescript-eslint/parser":"^4.23.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.26.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^11.0.0","prettier":"^2.3.0","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.3","ts-jest":"^26.5.6","ts-loader":"^9.1.2","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/com/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.com/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"68dd446f8a34aa89ec6287f2a6bb2585e8caa6a8","_id":"react-figma-ui@1.1.0-beta.4","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-9oLtsGG3LtRt4N3F7WRnieVNKGDN26cn6N6KfVSXKBKWAtdCjHZG6jHNrNDpdG2XKeiWeXRUQLR/UUzVG7ykAg==","shasum":"894f6e5e2be8d719e4a3f69987fef88efbd61b39","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0-beta.4.tgz","fileCount":30,"unpackedSize":70650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoZgzCRA9TVsSAnZWagAAoGkP/Rx+93FHpTjhEmKgz9FI\n9WgcUpy22rbE+9MbezMG0VSXLYD47BaQJ8RXMMXqniAe5D7DwPMggx2M3Z7r\n6+c/ysi8pTgnYuu6YUJo72Z7/m4WrUyhAXk8KJ9IoxnbxpvRrVYdJMwOeZX3\nsPpY/iaBShCkgEqRqntV5IQzOihO0t5VfK1iOOJyGDadkY5uH7i5Dh5+VfF0\ni6IvaVpoflbDF3PUG9pXc90I3eQGOq9w37tbHifnCBhOg0YFYJAKqigzd6st\n+GSZlwD9pj8w3eCP3qnMm5xVxeDzNhVLKUuMSXpC3N5peyVGudGSaGZNUqYJ\ngiawZmVCvKPdiq7c9gXHZ2kTQnJvVKPjNECIahgd4G2eMG+2AL14K1L48hzT\n9lTBTogH14RP6rnETK/xjFdwg+ZOzFYvIVaC0LNidoW7fHFyG3hmmLvDrSjG\n8GKcNR7xqUazx9HXZrcwbQOyfS42B1+DWzBTTmuQ7ySgc0iAAGTSk2oDmyXI\nV08kzawBi2G2LofHCYvQwtCHSUp/KQJQG9E7kXl1J6PWsWa0mFBCMsn4OZHC\nHugBOg1TzKK2dXEqMjdXkU8M+1eLcMECj5z7WddE+53Oj5L+WFiRIDzcVZ+v\niAm7A1L6XJlUaMzGTpfoi4Lq4JRmor2C0Nl3e4RonsS4L6XrdthJUyWfsshG\nWk6Z\r\n=8CGs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgr2y4+S5vHtQaYkV9K66dJfcUl0gyjG9OeeUnI2VmagIhAIJw7Yr0srqlWoLSm7+Ywv6hXgiiVJcxT5wpOVZT1jWW"}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0-beta.4_1621202994700_0.09361724623817569"},"_hasShrinkwrap":false},"1.1.0":{"name":"react-figma-ui","version":"1.1.0","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^1.0.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-controls":"^6.2.8","@storybook/addon-docs":"^6.2.8","@storybook/addon-storysource":"^6.2.8","@storybook/addons":"^6.2.8","@storybook/react":"^6.2.8","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@types/jest":"^26.0.23","@types/react":"^17.0.5","@typescript-eslint/parser":"^4.23.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.26.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^11.0.0","prettier":"^2.3.0","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.3","ts-jest":"^26.5.6","ts-loader":"^9.1.2","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"gitHead":"45fd54aa30687710e368f5fa1121830663a0d2e0","_id":"react-figma-ui@1.1.0","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-jBw/0gofyATksM/ZuygeXKhdhfbrADagXVeK6sJh4N+SvJf5yfLep1h56E+7otrVn51JckPNnpca65jA4x6n4Q==","shasum":"9867d8509d2c355c339db14d3d2da52e61f9bf3c","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.0.tgz","fileCount":30,"unpackedSize":70814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgog8sCRA9TVsSAnZWagAAYzEP/A5idoJbl2ayvPD4ppQ2\nFYec82almU1DK+Socl1W4HWoQU5ozWwjMPgrnSKN1a2ON54XhBx7oYVWS3/+\nVXbhF5+jdnguu7re+DfllXRO4ZiHR9RsAMF5BBQ84uWYGBJ+awD4zenoIIVA\no7czH9H2dwsQoGPD0lOyhslksnGmR7X0XOwpybCsiyIBdx9Zr4zpYMOQcHQZ\n/C7yhU22r/KcmE5UkW9tayAJaAJh9TJrOkiq11Sb/rsXtPDZjPe33dEV53Cj\nLSyWcchgokkIRDFUvMWpq2wvkxVIIubS0SaIIlOT7HNrwLmbKhiJ9XLSf9T1\nhwteaWWfFLX+8L6YzfmsRuZFfMy76FUemSgcsQ4k/Jw6MHmIK14zTma8ZNgr\nX/x+fXSv66d8FngnU5LHM8EDJFhjkWE5CiXJlHDVZA/A01Q7h66OsL3QJRE9\nr8lMIyNLJCS8NgCJ+RIT0uK79E3aiJ2SZn2Nwa7DgATmNONNqQgPmJYd6r8b\nOfNDtTvQkW1Znqz/RyOYawLKkhaNnmiyz1WAmzEo4Z1tWeND3jnxIZkrQ7kB\nVZy9Eeieg5+DacO/S4hFsuqv2f3Bm/wSVxvZMDKOkztQYcItNNC6uYG8GuMM\nmq6HvKz0K7T0R8diI574A2gVVksoXyZD3C5BwXicoIeiEgpIx1h2CZMoM9rD\nw1Me\r\n=20k4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOfu0JA8qTNjI3Tmq0vYV6D/SpoRLlJoPeIuD8eTqS9wIhAPHIueDtTy61iMzfUAutSsxygvCEEuP6NOEkm0wzLkEw"}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.0_1621233451603_0.469478359787177"},"_hasShrinkwrap":false},"1.1.1-beta.1":{"name":"react-figma-ui","version":"1.1.1-beta.1","description":"React implementation for figma-plugin-ds","author":{"name":"Jakub Biesiada"},"license":"MIT","main":"lib/react-figma-ui.cjs.js","module":"lib/react-figma-ui.esm.js","types":"lib/index.d.ts","scripts":{"prepack":"npm run clean && npm run prettier && npm run lint && npm run build","clean":"rimraf lib/*","build":"rollup -c","test":"jest --coverage","watch":"npm run build -- --watch","watch:test":"npm run test -- --watch","lint":"eslint 'src/**/*.{tsx,ts}' --fix","prettier":"prettier --write 'src/**/*.{tsx,ts}'","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","deploy-storybook":"storybook-to-ghpages","commit":"git-cz","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"keywords":["figma","ui","react","components","library"],"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"homepage":"https://github.com/JB1905/react-figma-ui#readme","dependencies":{"clsx":"^1.1.1","figma-plugin-ds":"^1.0.1"},"devDependencies":{"@rollup/plugin-node-resolve":"^13.0.0","@storybook/addon-controls":"^6.2.7","@storybook/addon-docs":"^6.2.7","@storybook/addon-storysource":"^6.2.7","@storybook/addons":"^6.2.7","@storybook/react":"^6.2.7","@storybook/storybook-deployer":"^2.8.7","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.7","@types/jest":"^26.0.23","@types/react":"^17.0.5","@typescript-eslint/parser":"^4.23.0","babel-loader":"^8.2.2","cz-conventional-changelog":"3.3.0","eslint":"7.26.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-react":"^7.23.2","eslint-plugin-react-hooks":"^4.2.0","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^11.0.0","prettier":"^2.3.0","react":"^17.0.2","react-dom":"^17.0.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.30.0","semantic-release":"^17.4.3","ts-jest":"^26.5.6","ts-loader":"^9.1.2","typescript":"^4.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"jest":{"testPathIgnorePatterns":["<rootDir>/node_modules/"],"setupFilesAfterEnv":["<rootDir>/setupTests.ts"],"moduleNameMapper":{"figma-plugin-ds":"<rootDir>/__mocks__/figmaPluginMock.ts","\\.(css)$":"<rootDir>/__mocks__/styleMock.ts"},"transform":{"^.+\\.tsx?$":"ts-jest"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{tsx,ts}":["npm run prettier","npm run lint"]},"readme":"# [React Figma UI](https://github.com/JB1905/react-figma-ui)\n\n[![NPM version](https://img.shields.io/npm/v/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM downloads](https://img.shields.io/npm/dm/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![NPM license](https://img.shields.io/npm/l/react-figma-ui?style=flat-square)](https://www.npmjs.com/package/react-figma-ui)\n[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-figma-ui?style=flat-square)](https://codecov.io/gh/JB1905/react-figma-ui)\n[![Travis](https://img.shields.io/travis/com/JB1905/react-figma-ui/master?style=flat-square)](https://travis-ci.com/JB1905/react-figma-ui)\n[![Bundle size](https://img.shields.io/bundlephobia/min/react-figma-ui?style=flat-square)](https://bundlephobia.com/result?p=react-figma-ui)\n\n## About\n\nReact implementation for [figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds/) by [Tom Lowry](https://github.com/thomas-lowry/)\n\n### Demo\n\n[**Playground – play with library in Storybook**](https://jb1905.github.io/react-figma-ui/)\n\n### Alternatives\n\n- [react-figma-plugin-ds](https://github.com/alexandrtovmach/react-figma-plugin-ds/) by [Alexandr Tovmach](https://github.com/alexandrtovmach/)\n- [Figma Styled Components](https://github.com/jhardy/figma-styled-components/) by [Jared](https://github.com/jhardy/)\n- [figma-ui-components](https://github.com/lessmess-dev/figma-ui-components/) by [lessmess](https://github.com/lessmess-dev/)\n- [Figma React UI Kit](https://github.com/LiamMartens/figma-react-ui-kit/) by [Liam Martens](https://github.com/LiamMartens/)\n\n## Contents\n\n- [How to Install](#how-to-install)\n- [Components](#components)\n  - [Button](#button)\n  - [Checkbox](#checkbox)\n  - [Disclosure](#disclosure)\n  - [Icon](#icon)\n  - [Icon button](#icon-button)\n  - [Input](#input)\n  - [Labels and sections](#labels-and-sections)\n  - [Onboarding tip](#onboarding-tip)\n  - [Radio button](#radio-button)\n  - [Select menu](#select-menu)\n  - [Switch](#switch)\n  - [Textarea](#textarea)\n  - [Type](#type)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install react-figma-ui\n```\n\nOr Yarn:\n\n```sh\n$ yarn add react-figma-ui\n```\n\n## Components\n\n### Button\n\nTo use the button, use the following component. Each button has a destructive option. Tertiary buttons are styled like hyperlinks.\n\n```jsx\nimport { Button } from 'react-figma-ui';\n\n// Primary\n<Button tint=\"primary\">Label</Button>\n<Button tint=\"primary\" destructive>Label</Button>\n<Button tint=\"primary\" disabled>Label</Button>\n\n// Secondary\n<Button tint=\"secondary\">Label</Button>\n<Button tint=\"secondary\" destructive>Label</Button>\n<Button tint=\"secondary\" disabled>Label</Button>\n\n// Tertiary (Hyperlink style button)\n<Button tint=\"tertiary\">Label</Button>\n<Button tint=\"tertiary\" destructive>Label</Button>\n<Button tint=\"tertiary\" disabled>Label</Button>\n```\n\n#### Available options\n\n[HTML button element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) and dedicated params\n\n| Param         | Description                                                                            |\n| ------------- | -------------------------------------------------------------------------------------- |\n| `tint`        | Display style for button: primary (filled), secondary (outlined), tertiary (hyperlink) |\n| `destructive` | Add red destructive variant for actions such as deleting something                     |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following component. Remember each checkbox should get a unique ID.\n\n```jsx\nimport { Checkbox } from 'react-figma-ui';\n\n// Checkbox unchecked\n<Checkbox id=\"uniqueId\">Label</Checkbox>\n\n// Checkbox checked\n<Checkbox id=\"uniqueId\" checked>Label</Checkbox>\n\n// Checkbox disabled\n<Checkbox id=\"uniqueId\" disabled>Label</Checkbox>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                  |\n| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for checkbox container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element      |\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following component.\n\n```jsx\nimport { Disclosure, DisclosureTip } from 'react-figma-ui';\n\n// Example tips\nconst tips = [\n  { heading: 'Heading 1', content: 'Content 1', id: 1 },\n  { heading: 'Heading 2', content: 'Content 2', id: 2 },\n  { heading: 'Heading 3', content: 'Content 3', id: 3 },\n];\n\n() => (\n  <Disclosure\n    tips={tips}\n    render={({ heading, content, id }, index) => (\n      <DisclosureTip\n        heading={heading}\n        content={content}\n        section={index % 2 === 0}\n        expanded={index % 2 === 1}\n        key={id}\n      />\n    )}\n  />\n);\n```\n\n#### Available options\n\n**Disclosure**\n\n[HTML ul element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param    | Description                    |\n| -------- | ------------------------------ |\n| `tips`   | Array with disclosure tips     |\n| `render` | Render props for DisclosureTip |\n\n**DisclosureTip**\n\n[HTML li element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes) and dedicated params\n\n| Param                                                                                                           | Description                                   |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| `heading`                                                                                                       | Heading text value                            |\n| `content`                                                                                                       | Content text value                            |\n| `section`                                                                                                       | Style label like a heading                    |\n| `expanded`                                                                                                      | Add this option to have item expanded on load |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)   | Props for label element                       |\n| [`contentProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for content element                     |\n\n---\n\n### Icon\n\nTo use the icon, use the following component. Apply the appropriate icon name to select the item you wish to use, you can also add option to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```jsx\nimport { Icon } from 'react-figma-ui';\n\n// Icon\n<Icon iconName=\"theme\" />\n\n// Icon with blue colorName to change color\n<Icon iconName=\"theme\" colorName=\"blue\" />\n\n// Spinner Icon with spinning animation\n<Icon iconName=\"spinner\" spin />\n\n// Text Icon\n<Icon>W</Icon>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param         | Description                                                                        |\n| ------------- | ---------------------------------------------------------------------------------- |\n| `iconName`    | Sepcify which icon to use (e.g.: `alert`, `draft`, `settings`)                     |\n| `spin`        | Causes the icon to spin in an endless loop (e.g.: loader used with `spinner` icon) |\n| `colorName`\\* | Pass the name of any Figma color var to this prop (e.g.: `blue`, `black3`)         |\n\n\\*Colors accepted: `blue`, `purple`, `purple4`, `hot-pink`, `green`, `red`, `yellow`, `black`, `black8`, `black3`, `white`, `white8`, `white4`\n\n[Preview available icons here](https://github.com/thomas-lowry/figma-plugin-ds/#icon)\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component.\n\n```jsx\nimport { IconButton } from 'react-figma-ui';\n\n// Icon button with a blend icon\n<IconButton iconProps={{ iconName: 'blend' }} />\n\n// Icon button with selected option\n<IconButton iconProps={{ iconName: 'blend' }} selected />\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                               | Description                                       |\n| ----------------------------------- | ------------------------------------------------- |\n| `selected`                          | Add this option to have selected style for button |\n| [`iconProps`](#available-options-3) | Props for icon component                          |\n\n---\n\n### Input\n\nTo use the input, use the following component.\n\n```jsx\nimport { Input } from 'react-figma-ui';\n\n// Input with placeholder\n<Input placeholder=\"Placeholder\" />\n\n// Input with initial value\n<Input value=\"Initial value\" />\n\n// Disabled input\n<Input value=\"Initial value\" disabled />\n\n// Input with icon\n<Input value=\"Value\" iconProps={{ iconName: 'angle' }} />\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use following components.\n\n```jsx\nimport { Label, SectionTitle } from 'react-figma-ui';\n\n// Label\n<Label>Label</Label>\n\n// Section title\n<SectionTitle>Section title</SectionTitle>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following component.\n\n```jsx\nimport { Onboarding } from 'react-figma-ui';\n\n() => (\n  <Onboarding iconProps={{ iconName: 'styles' }}>\n    Onboarding tip goes here.\n  </Onboarding>\n);\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`iconProps`](#available-options-3)                                                                               | Props for icon component   |\n\n---\n\n### Radio button\n\nTo create an radio button, use the following component. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```jsx\nimport { Radio } from 'react-figma-ui';\n\n// Radio button\n<Radio value=\"Value\" id=\"radioButton1\" name=\"radioGroup\">Radio button</Radio>\n\n// Radio button checked\n<Radio value=\"Value\" id=\"radioButton2\" name=\"radioGroup\" checked>Radio button</Radio>\n\n// Radio button disabled\n<Radio value=\"Value\" id=\"radioButton3\" name=\"radioGroup\" disabled>Radio button</Radio>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description               |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for radio container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element   |\n\n---\n\n### Select menu\n\nTo create an select menu, use following components.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```jsx\nimport { SelectMenu, SelectMenuOption } from 'react-figma-ui';\n\n// Example options\nconst options = [\n  { value: 1, label: 'Option 1' },\n  { value: 2, label: 'Option 2' },\n  { value: 3, label: 'Option 3' },\n];\n\n() => (\n  <SelectMenu\n    options={options}\n    render={({ value, label }) => (\n      <SelectMenuOption value={value} key={value}>\n        {label}\n      </SelectMenuOption>\n    )}\n  />\n);\n```\n\n#### Available options\n\n**SelectMenu**\n\n[HTML select element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                       |\n| --------- | --------------------------------- |\n| `options` | Array with select menu options    |\n| `render`  | Render props for SelectMenuOption |\n\n**SelectMenuOption**\n\n[HTML option element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes)\n\n---\n\n### Switch\n\nTo use the switch, use the following component. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```jsx\nimport { Switch } from 'react-figma-ui';\n\n// Switch\n<Switch id=\"uniqueId\">Label</Switch>\n\n// Switch checked\n<Switch id=\"uniqueId\" checked>Label</Switch>\n\n// Switch disabled\n<Switch id=\"uniqueId\" disabled>Label</Switch>\n```\n\n#### Available options\n\n[HTML input element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) and dedicated params\n\n| Param                                                                                                             | Description                |\n| ----------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| [`containerProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) | Props for switch container |\n| [`labelProps`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes)                        | Props for label element    |\n\n---\n\n### Textarea\n\nTo use the textarea, use the following component.\n\n```jsx\nimport { Textarea } from 'react-figma-ui';\n\n// Textarea\n<Textarea value=\"Initial value\" rows={2} />\n\n// Textarea disabled\n<Textarea value=\"Initial value\" rows={2} disabled />\n```\n\n#### Available options\n\n[HTML textarea element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following component plus additional options to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```jsx\nimport { Type } from 'react-figma-ui';\n\n<Type>UI11, size: xsmall (default) weight: normal, positive</Type>\n\n<Type>UI13, size: large, weight: bold, positive</Type>\n\n<Type size=\"large\" weight=\"medium\" inverse>UI12, size: large, weight: medium, negative</Type>\n```\n\n#### Available options\n\n[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#list_of_global_attributes) and dedicated params\n\n| Param     | Description                                                                                         |\n| --------- | --------------------------------------------------------------------------------------------------- |\n| `size`    | Font size: **small** - 12px, **large** - 13px, **xlarge** - 14px                                    |\n| `weight`  | Font weight: medium, bold                                                                           |\n| `inverse` | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n\n## License\n\nThis project is licensed under the MIT License © 2020-present Jakub Biesiada\n","readmeFilename":"README.md","gitHead":"0f5004ad1286c9d38bbefa64cfbab32ce62ab4ea","_id":"react-figma-ui@1.1.1-beta.1","_nodeVersion":"12.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Smk6rY0rV0N2FVCAhUW1TtvPuBDrSxGMn2+/604XU/rbZpvUyEx2rBp5HA3MI00/U2vMVYicTwJWeFCVj0bzZQ==","shasum":"5ef797e091d290565db86c5dbb1ea6d2f2adf024","tarball":"https://registry.npmjs.org/react-figma-ui/-/react-figma-ui-1.1.1-beta.1.tgz","fileCount":30,"unpackedSize":70909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgohaRCRA9TVsSAnZWagAA8fUP/Rt1BD6cMDT1cb3ADcYM\nT7RjBHelvugQrSeyoaI8RKXLLhXwq6+gS5+16SO0R8qBkZjlULI/eMit9DAN\nCGlccyp4Vbie60OjJPL59M3Z2toLkJ+7C3EffU+CHE2XYlNn0ZDboRQk5Axh\nMX/3LUMU5TDyhbSFU2kzowiVG/gXnksGIHOOlHAOFoIcIgEo/Q/EE3h6dPR2\nfPkVvhfwMaTxPxGWV+hL2lfE3gZN7KReYPhfVpoFtXDZu2k6oKaMkGf8pH3m\nFxBSeMIch2MOr7A3NEQxLq2IpDQgJ/vyowOeg6r45MEvmopvBOCAmTjA+cXf\nl1oL3JDCy7Q0HKu6ZxnFfNzcUk0diBDeRthRXyENM8GYfR15w6qB6AVrGX4w\nmFX+7M2nnJeq5sb0/tweHthdm7oFh6Pl2O8Sfs/JXlgwffvxUxj0Hl1t2FhG\n+yS7XC2V6UVrcwiY172P8nBKVR7Z7mrOOMjrNtjArFFPRg/IddTtncCO66DX\nNo9EgL2m2gyekV/86EHG6GIanhnIeXDUBFz6tQImzJ9wrdMLimwddf2dkkKm\nsTCNWwb3cRbFXcc4Z2vypB5boMoJoQDhKSOW2py+tRVu/VwbQuGfJU55ZvZS\nsGvdczcrDXVk2I2gp2d2zhvwR3nbKbIzOrQSY1BE1Y23tG+8nv5t7+xqLxD2\n8BT0\r\n=u3H3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGxpEZm+phPIy0xYbPo+YnJhqOaswgDuOKRO2G/eEc/AIgfLxBh9QR/miQasQR//cv6EMlZGt/gTD19QvpM9N1o74="}]},"_npmUser":{"name":"jbiesiada","email":"biesiadajakub@icloud.com"},"directories":{},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-figma-ui_1.1.1-beta.1_1621235344986_0.9303859372749637"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-20T09:41:15.031Z","0.0.0":"2020-05-20T09:41:15.178Z","modified":"2022-05-14T10:45:14.522Z","1.0.0-alpha.0":"2020-05-20T22:24:25.358Z","1.0.0-alpha.1":"2020-05-21T13:35:20.374Z","1.0.0-alpha.2":"2020-05-21T13:35:56.585Z","1.0.0-beta.1":"2020-05-22T13:29:02.489Z","1.0.0-beta.2":"2020-05-23T16:57:43.412Z","1.0.0-beta.3":"2020-05-24T10:48:31.754Z","1.0.0-beta.4":"2020-06-22T12:58:30.780Z","1.0.0-beta.5":"2020-06-22T13:01:21.088Z","1.0.0-beta.6":"2020-06-24T22:43:09.388Z","1.0.0-beta.7":"2020-07-18T07:26:17.679Z","1.0.0-beta.8":"2020-07-18T07:26:50.578Z","1.0.0-beta.8.1":"2020-07-18T08:02:32.257Z","1.0.0-beta.9":"2020-07-18T08:05:34.596Z","1.0.0-beta.10":"2020-07-18T08:07:15.583Z","1.0.0-beta.11":"2020-07-18T13:17:35.511Z","1.0.0-beta.12":"2020-08-26T18:31:54.664Z","1.0.0":"2020-11-16T21:08:59.954Z","1.0.1-beta.1":"2020-11-27T21:04:20.519Z","1.0.1-beta.2":"2020-11-27T21:04:46.381Z","1.0.1":"2020-12-02T21:17:35.536Z","1.1.0-beta.1":"2021-03-09T22:06:33.139Z","2.0.0-alpha.1":"2021-03-09T22:12:30.315Z","1.1.0-experiment.1":"2021-04-17T20:43:27.684Z","1.1.0-experiment.2":"2021-04-18T09:32:38.662Z","1.1.0-experiment.3":"2021-04-18T09:38:03.753Z","1.1.0-experiment.4":"2021-04-18T09:43:18.724Z","1.1.0-experiment.5":"2021-04-18T09:46:40.957Z","1.1.0-experiment.6":"2021-04-18T09:51:27.858Z","1.1.0-experiment.7":"2021-04-18T10:39:08.225Z","1.1.0-experiment.8":"2021-04-18T10:42:08.232Z","1.1.0-beta.2":"2021-05-16T22:02:57.312Z","1.1.0-beta.3":"2021-05-16T22:03:31.827Z","1.1.0-beta.4":"2021-05-16T22:09:54.843Z","1.1.0":"2021-05-17T06:37:31.825Z","1.1.1-beta.1":"2021-05-17T07:09:05.127Z"},"maintainers":[{"name":"jbiesiada","email":"biesiadajakub@icloud.com"}],"description":"React implementation for figma-plugin-ds","homepage":"https://github.com/JB1905/react-figma-ui#readme","keywords":["figma","ui","react","components","library"],"repository":{"type":"git","url":"git+https://github.com/JB1905/react-figma-ui.git"},"author":{"name":"Jakub Biesiada"},"bugs":{"url":"https://github.com/JB1905/react-figma-ui/issues"},"license":"MIT","readme":"","readmeFilename":""}