{"_id":"@master/style-element.react","_rev":"39-938a40ebe91cebed0c8152bc62de050a","time":{"created":"2022-12-25T05:46:19.508Z","1.0.0":"2022-07-14T07:48:49.582Z","modified":"2023-07-15T10:04:44.557Z","1.0.1-alpha.1":"2022-07-14T11:31:30.652Z","1.0.1":"2022-08-22T05:54:41.457Z","1.0.2":"2022-08-22T06:06:18.884Z","1.0.3":"2022-08-22T12:08:40.574Z","1.0.4":"2022-08-23T10:53:36.349Z","1.0.5":"2022-08-23T11:02:16.101Z","1.0.6":"2022-08-23T15:13:14.782Z","1.0.7":"2022-08-24T05:15:55.656Z","1.0.8":"2022-08-24T06:36:25.485Z","1.0.9":"2022-08-24T14:07:25.593Z","1.1.0-alpha.1":"2022-09-01T03:52:54.095Z","1.1.0":"2022-09-01T04:06:34.654Z","1.1.1":"2022-09-12T12:08:27.472Z","1.1.2":"2022-09-19T00:40:59.276Z","1.1.3":"2022-09-20T05:38:42.040Z","1.1.4":"2022-09-21T05:28:35.492Z","1.1.5":"2022-09-30T11:30:28.934Z","1.1.6":"2022-10-02T09:45:59.542Z","1.1.7":"2022-12-02T20:30:56.327Z","1.1.8":"2022-12-02T20:38:30.933Z","1.1.9":"2022-12-03T19:38:17.365Z","1.1.10":"2022-12-03T20:12:15.119Z","2.0.0-beta.1":"2022-12-04T12:31:29.472Z","2.0.0-beta.2":"2022-12-25T05:46:19.754Z","2.0.0-beta.3":"2022-12-25T18:13:01.731Z","2.0.0-beta.4":"2022-12-29T12:29:31.777Z","2.0.0-beta.5":"2022-12-29T13:20:39.368Z","2.0.0-beta.6":"2023-01-04T02:10:17.775Z","2.0.0-beta.7":"2023-02-06T01:13:19.940Z"},"name":"@master/style-element.react","dist-tags":{"beta":"2.0.0-beta.7","latest":"2.0.0-beta.2"},"versions":{"2.0.0-beta.2":{"name":"@master/style-element.react","scripts":{"build":"aron pack","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Quickly create reusable React elements driven by class names ~800B","author":{"name":"Aoyue Design LLC."},"funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/style-element/issues"},"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"dependencies":{"@master/literal":"^1.0.11"},"peerDependencies":{"@types/react":">=15","react":">=16.0.0"},"version":"2.0.0-beta.2","gitHead":"0a830349e9f164b4be61137a88d2b361d97086cc","_id":"@master/style-element.react@2.0.0-beta.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-AzUWe8QXYcjbEgUi8VnsDTEeCGxsJwGD/6W9JD9rpKR1yovakURgEFcofg5WPTLryyofdwyT5WpPGR18PDvEvg==","shasum":"2dfa47630c581608df7b1fa757bbc6123cce0c6b","tarball":"https://registry.npmjs.org/@master/style-element.react/-/style-element.react-2.0.0-beta.2.tgz","fileCount":5,"unpackedSize":16614,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC97KWR7Et9dKQUzT96t26jNJLF/ZkUkhABaE06c3Z59AIhAJhfqU7pCaSJIGxkaj2A5Ga2CVb9SIAUbgpP+l3yICme"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjp+OrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrx/w/+KpK/0Ef1pMKNmc6n5P1HJNG4/VRYSfH4TG10XM5X0VLXnl6h\r\nszXPiW8cYeRXe8HKLSxQJRrmw/z1OuIKftgtWAeO+4QNqgjDo4bqVCyaz8wA\r\nm1mfeQUStiAxM4JBsLmsxjUHLfluM+n+bQtDDsxc0Wd3kxn4XxliLHJ778cD\r\nBKFxAMFdeEJkmQw6AC1p+csC4Cnp5W6+77g+x7qXgZhPtIDsbiY+GYBtjI9z\r\nPWE5fmR09YWWZRG6DkZQHOE79kQgmVCHX/jLhb3Ju8Zv2EyAid1mAHEk7aon\r\njiVCTwSFOHvQkVJ55S4Djf2cG08xI0uyJGMgal8ndKHp4An7rHNFW1PeEoQD\r\ngDEDX6awJiLiRnxynps6mDWd29TwoICR8s9+uYNXSJuL2XaqdhGIvNTc92bF\r\nNYbocK4HT6CwseWWgEitc3J7SFw6HPpmGoEfE+6IZZP3s5pw+zZzZyyr5EGw\r\n3oIY+0Aj93y17TklVz3CvrZwKRvvzPQJOxcDmspzrHX5AM51f3uICMDtu4GF\r\ngBLbGqMTiZL8KrgX4skvcHAhZPuQVqms6iEY8BpjEJfj3nmnaYqnyxdDZNcN\r\njajkuGd582CACoeEPUPzO3YiWBYDQjWvysfsL7T8i+O+SZ+StSDXG8EnJIoo\r\nPiSGHFj2+1QBgbNDRpk9KpbWx8aui5pXZ9A=\r\n=q8aG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1aron","email":"aron@master.co"},"directories":{},"maintainers":[{"name":"benseage0","email":"bg012300@gmail.com"},{"name":"1aron","email":"aron@master.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-element.react_2.0.0-beta.2_1671947179568_0.03405752126354722"},"_hasShrinkwrap":false,"deprecated":"Integrate into @master/css.react"},"2.0.0-beta.3":{"name":"@master/style-element.react","scripts":{"build":"aron pack","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Quickly create reusable React elements driven by class names ~800B","author":{"name":"Aoyue Design LLC."},"funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/style-element/issues"},"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"dependencies":{"to-line":"^1.5.0"},"peerDependencies":{"@types/react":">=15","react":">=16.0.0"},"version":"2.0.0-beta.3","readme":"
\n
\n\n

\n \n \n \n \n \"Master\n \n \n

\n

Quickly create reusable React elements driven by class names ~800B

\n\n

\n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"Discord\n \n \n \n \n \n \n \"Follow\n \n \n \n \n \n \n \"Github\n \n \n

\n\n
\n\n\n\n- Styled elements **driven by class names**.\n- Quickly create **reusable** styled elements.\n- Create styled elements with **less code**.\n- **Extend** existing styled elements.\n- **Conditionally construct class names** and strings with template literals.\n\n
\n\n## Concepts\n\n🔴 Traditionally, you would extract a reusable element into a functional component.\n```jsx\nfunction Button(props) {\n return (\n \n )\n}\n```\n🟢 Now, implement the same in one line with **~80% code less**\n```jsx\nconst Button = style.button`inline-flex font:14`\n```\n---\nthen apply it as usual:\n```jsx\nexport default function App() {\n return (\n \n )\n}\n```\nrendered as:\n```html\n\n```\n\n## Feature Overview\n```jsx\nconst Button = style.button(\n 'font:semibold rounded',\n {\n intent: {\n // \n \n )\n}\n```\n\n### Apply additional class names\nAdd `uppercase` for the button here.\n```jsx\nconst Button = style.button`inline-flex font:14`\n\nreturn (\n \n \n)\n```\n\n### Apply class names based on properties\nIf the custom property name isn't the part of the element, you must prefix it with `$` to prevent it from being reflected to the element's attribute or getting type errors.\n```jsx\nconst Button = style.button(\n 'inline-flex font:14',\n ({ $color }) => $color && `font:white bg:${$color}`)\n)\n\nreturn (\n \n \n\n \n \n\n \n \n)\n```\n\n### Transform tag names\nIf you just want to transform a styled element tag name, leave `` empty.\n```jsx\nconst Button = style.button`inline-flex font:14` \n \n\n Anchor\n // Anchor\n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n### Extend styled elements\n```jsx\nconst Button = style.button`inline-flex font:14`\n\n // extend Button with addtional class names\nconst Button1 = el(Button)`text:center`\n\n// extend Button with addtional class names and transform it into \nconst Button2 = style.a(Button)`italic`\n\n// extend Button1 and Button2 with addtional class names\nconst Button3 = el(Button1)(Button2)`font:bold`\n\nreturn (\n \n \n\n Button 1\n \n\n Button 2\n Button 2\n\n Button 3\n \n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n## Related\n- [@master/css](https://github.com/master-co/css) - A Virtual CSS language with enhanced syntax\n- [@master/literal](https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals. ~600B","readmeFilename":"README.md","gitHead":"471345e7902effedb5de2f723fa65ad90f34071f","_id":"@master/style-element.react@2.0.0-beta.3","_nodeVersion":"18.12.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-zD/65AAiyFOKCYEMA+UjQDVKf97cbxGfzxVTmrDrMB9ZAEoAKouHIJCeEUv5rf0T3T+a8hXkO33xCipz/mOvLw==","shasum":"df7ef797b6ac22e22e02cddc4de64031c6d5e605","tarball":"https://registry.npmjs.org/@master/style-element.react/-/style-element.react-2.0.0-beta.3.tgz","fileCount":5,"unpackedSize":16589,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQnQjwEh0uBzQjPap+x4PAIbEC6kTNilvh0bYzRxGLsAiBcasl+ptVHzq8+H4OreCp2EYmKyhWQr/tADyf/kHWLlg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqJKtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3AA/+J/m9pVscp3I1LEG2fPveujG08+vZRkd4Z8Ek4F17gW3JKzeF\r\n636Q4RneLwPtu6LH4fc3zhgKqFJkA3lxyuooDY8+aMuZWBSY0QPIYqgkfh9h\r\nEJYJyWymLAertDsQfcr5OOYb1vFGP+wb9s4EqbMZldW+J4bU++ugh4oeSjfn\r\nfHJP1B5V47uTy0qNYztoaPxLMBeQHmIt9FwvS7tK9Zn7QUazpM+h69/ilm+Z\r\nWV/8eBGZwyUX9ZGnIocxLX6YUPssCR9OD308eAHNXMQPAUmo5HUTYeUbyyUL\r\nutNSFCzivspJBpU2pW4zF7AFEuy9y4lUVo5ubIVS8jqoCBRCLZ/La63k23Gs\r\nNr+eGhdFrHO1CzOGUBuDmtk6M/ZE2cxXD9rzUPtXdb7BuBF5IAVmVxDYUsoU\r\nN0HbNQD5Uq1Mu9z0EXsrPECWBuk5B/90E+23znZMNNYMHRrb3bOaXK4YUkK0\r\noL1xUE8QrmPBZ/QSrjcTj+JAxvcN5+FgqmJsyIn/4KQ4gbDBMUqsO42jCEqx\r\ntOk8vhXefB4IQHcytOzzB1/zWvqj4KzCGm0o8c7ZEARdd1qXqS3GwJ4zbMiD\r\n69wsMpQnelI+ID+PMQYsAS71bvYHabq2N2ata5QVKiAiGfSdCJDZ5ETORmjl\r\nRm0KH/I7b83aaT2pAGYItEA1PW5ot8yyKTU=\r\n=OWo1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1aron","email":"aron@master.co"},"directories":{},"maintainers":[{"name":"benseage0","email":"bg012300@gmail.com"},{"name":"1aron","email":"aron@master.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-element.react_2.0.0-beta.3_1671991981568_0.041453339111637844"},"_hasShrinkwrap":false,"deprecated":"Integrate into @master/css.react"},"2.0.0-beta.4":{"name":"@master/style-element.react","scripts":{"build":"aron pack","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Quickly create reusable React elements driven by class names ~800B","author":{"name":"Aoyue Design LLC."},"funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/style-element/issues"},"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"dependencies":{"to-line":"^1.5.0"},"peerDependencies":{"@types/react":">=15","react":">=16.0.0"},"version":"2.0.0-beta.4","readme":"
\n
\n\n

\n \n \n \n \n \"Master\n \n \n

\n

Quickly create reusable React elements driven by class names ~800B

\n\n

\n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"Discord\n \n \n \n \n \n \n \"Follow\n \n \n \n \n \n \n \"Github\n \n \n

\n\n
\n\n\n\n- Styled elements **driven by class names**.\n- Quickly create **reusable** styled elements.\n- Create styled elements with **less code**.\n- **Extend** existing styled elements.\n- **Conditionally construct class names** and strings with template literals.\n\n
\n\n## Concepts\n\n🔴 Traditionally, you would extract a reusable element into a functional component.\n```jsx\nfunction Button(props) {\n return (\n \n )\n}\n```\n🟢 Now, implement the same in one line with **~80% code less**\n```jsx\nconst Button = style.button`inline-flex font:14`\n```\n---\nthen apply it as usual:\n```jsx\nexport default function App() {\n return (\n \n )\n}\n```\nrendered as:\n```html\n\n```\n\n## Feature Overview\n```jsx\nconst Button = style.button(\n 'font:semibold rounded',\n {\n intent: {\n // \n \n )\n}\n```\n\n### Apply additional class names\nAdd `uppercase` for the button here.\n```jsx\nconst Button = style.button`inline-flex font:14`\n\nreturn (\n \n \n)\n```\n\n### Apply class names based on properties\nIf the custom property name isn't the part of the element, you must prefix it with `$` to prevent it from being reflected to the element's attribute or getting type errors.\n```jsx\nconst Button = style.button(\n 'inline-flex font:14',\n ({ $color }) => $color && `font:white bg:${$color}`)\n)\n\nreturn (\n \n \n\n \n \n\n \n \n)\n```\n\n### Transform tag names\nIf you just want to transform a styled element tag name, leave `` empty.\n```jsx\nconst Button = style.button`inline-flex font:14` \n \n\n Anchor\n // Anchor\n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n### Extend styled elements\n```jsx\nconst Button = style.button`inline-flex font:14`\n\n // extend Button with addtional class names\nconst Button1 = el(Button)`text:center`\n\n// extend Button with addtional class names and transform it into \nconst Button2 = style.a(Button)`italic`\n\n// extend Button1 and Button2 with addtional class names\nconst Button3 = el(Button1)(Button2)`font:bold`\n\nreturn (\n \n \n\n Button 1\n \n\n Button 2\n Button 2\n\n Button 3\n \n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n## Related\n- [@master/css](https://github.com/master-co/css) - A Virtual CSS language with enhanced syntax\n- [@master/literal](https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals. ~600B","readmeFilename":"README.md","gitHead":"de950e21368cdfc090f1ef532a45e653797069af","_id":"@master/style-element.react@2.0.0-beta.4","_nodeVersion":"18.12.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-nUowqgRuy3jG9gvHCS4wBdvpvxhBCwfg4ED5n3ghG2DeFlCzxdENacPugm+5mT6/MehGF/sTMOCIL2EVXhlYgg==","shasum":"77df06bb9deb04bca2ce23ae0d68b4340cdba9e9","tarball":"https://registry.npmjs.org/@master/style-element.react/-/style-element.react-2.0.0-beta.4.tgz","fileCount":5,"unpackedSize":16763,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfNpsLaqYBjgyJfpMtpExRs4CncVwr5wkwU1cw4/lj2AIhAIA604TSMORADkwjSu1vvd0/a5Ll9B0IJhwwWCAZXPGr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrYgrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqk3g//UCLdWAahLPVWFvDOFrHqqSfWD6La6ImsuHVumVhMVLlSc9By\r\nsSCMFD6JjpdqhNqsFPRtKkoW+Ob7H/hPDUZRndRlVMXnfIkbSH/Gn/TlxDDM\r\nJPgYTFVCN4GgyyMq69/+roVjQv2zTrZKAhaghE+FbbbSSDVvxKFdB0FrP/9u\r\ntzNfaSe7qtDUxQamX3/ir7tRUpqtiOgSIjZO3rQugsiwyhAV3usTvBtW9ZhJ\r\nh00seLvDHPMVbsZ8BAGq49QPp6G6L1uvD740o+qGCX5PHF05VnPWj7oZN5nJ\r\n+SqHOpcfyL1YlT3eVRZnPKMxlH8WA0zcL4at+E/eim4jmgm/ucZ8m7wONqoj\r\nPK1qp+qnQXcmhRfnxNtGY0Xf3MYfpbltAMw/iQ/fw7kgImjlhj1DIuUcTg7i\r\n7CIPR+Kb/ahLk+q0Bo81mJH3coQMZ35R2b857GMXffAlP1X1MFFrlCA7FZKN\r\nON47PF3+uCrn2d9i/huP45KELt3TWVuYrQU+FTfiUX1P/luJyBnMGSdeVVIK\r\nO/2pxPRgR5O4JhumO1EcfBkMz1rOHwAbYtAQWqP+u/ejfDm6FPHY2U8KL0Eh\r\nZIKgo2wmns0/s+olQAHn9Ak9n4yhFMdy1VmV9wq4RviTGgcz+Hb2RKru9jxo\r\nqCnZ38weTuQ/B2+d9lrPhmy/lvT47IP0uRY=\r\n=rSeh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1aron","email":"aron@master.co"},"directories":{},"maintainers":[{"name":"benseage0","email":"bg012300@gmail.com"},{"name":"1aron","email":"aron@master.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-element.react_2.0.0-beta.4_1672316971601_0.16736651403637648"},"_hasShrinkwrap":false,"deprecated":"Integrate into @master/css.react"},"2.0.0-beta.5":{"name":"@master/style-element.react","scripts":{"build":"aron pack","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Quickly create reusable React elements driven by class names ~800B","author":{"name":"Aoyue Design LLC."},"funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/style-element/issues"},"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"dependencies":{"to-line":"^1.5.0"},"peerDependencies":{"@types/react":">=15","react":">=16.0.0"},"version":"2.0.0-beta.5","readme":"
\n
\n\n

\n \n \n \n \n \"Master\n \n \n

\n

Quickly create reusable React elements driven by class names ~800B

\n\n

\n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"Discord\n \n \n \n \n \n \n \"Follow\n \n \n \n \n \n \n \"Github\n \n \n

\n\n
\n\n\n\n- Styled elements **driven by class names**.\n- Quickly create **reusable** styled elements.\n- Create styled elements with **less code**.\n- **Extend** existing styled elements.\n- **Conditionally construct class names** and strings with template literals.\n\n
\n\n## Concepts\n\n🔴 Traditionally, you would extract a reusable element into a functional component.\n```jsx\nfunction Button(props) {\n return (\n \n )\n}\n```\n🟢 Now, implement the same in one line with **~80% code less**\n```jsx\nconst Button = style.button`inline-flex font:14`\n```\n---\nthen apply it as usual:\n```jsx\nexport default function App() {\n return (\n \n )\n}\n```\nrendered as:\n```html\n\n```\n\n## Feature Overview\n```jsx\nconst Button = style.button(\n 'font:semibold rounded',\n {\n intent: {\n // \n \n )\n}\n```\n\n### Apply additional class names\nAdd `uppercase` for the button here.\n```jsx\nconst Button = style.button`inline-flex font:14`\n\nreturn (\n \n \n)\n```\n\n### Apply class names based on properties\nIf the custom property name isn't the part of the element, you must prefix it with `$` to prevent it from being reflected to the element's attribute or getting type errors.\n```jsx\nconst Button = style.button(\n 'inline-flex font:14',\n ({ $color }) => $color && `font:white bg:${$color}`)\n)\n\nreturn (\n \n \n\n \n \n\n \n \n)\n```\n\n### Transform tag names\nIf you just want to transform a styled element tag name, leave `` empty.\n```jsx\nconst Button = style.button`inline-flex font:14` \n \n\n Anchor\n // Anchor\n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n### Extend styled elements\n```jsx\nconst Button = style.button`inline-flex font:14`\n\n // extend Button with addtional class names\nconst Button1 = el(Button)`text:center`\n\n// extend Button with addtional class names and transform it into \nconst Button2 = style.a(Button)`italic`\n\n// extend Button1 and Button2 with addtional class names\nconst Button3 = el(Button1)(Button2)`font:bold`\n\nreturn (\n \n \n\n Button 1\n \n\n Button 2\n Button 2\n\n Button 3\n \n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n## Related\n- [@master/css](https://github.com/master-co/css) - A Virtual CSS language with enhanced syntax\n- [@master/literal](https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals. ~600B","readmeFilename":"README.md","gitHead":"68099554ae1728ef84107e4a92b2b51b70f2e147","_id":"@master/style-element.react@2.0.0-beta.5","_nodeVersion":"18.12.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-CwvF4i5YYsaGY/hHE6x52TaugmI3xrGRrMIaBQlsRLru0R6kU4PmkwhiIT3sxmPjOhY0BnXxlRif2oCvnB5gfw==","shasum":"189ebe6cb5fee3a203af961e4a35af47d54a67bf","tarball":"https://registry.npmjs.org/@master/style-element.react/-/style-element.react-2.0.0-beta.5.tgz","fileCount":5,"unpackedSize":16757,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU2cG/6+fmigCBW0Wxy2VO1AuGsxsdZ3cTmDHFloVAbAIhAJaHQ9H2/cxbSnwgY8b28AWqahy55tSs0mYLWQB5hXne"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZQnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIlA//ZLJocw7gFZfg9YPrzPZV9Tz1uu4oCniPRmZNYYrx1yxeNwVn\r\nAjXa3DqpopMfbrgcYoqzTn0/rP5W2B21rHEmIs8W0rzFJWhOJC9af72fX9y4\r\nn8z2eawmPGQwqpKR1q/jTBEXY46yZQSwXsPowP3BqHDVcLa4M0H5V3eufheq\r\nYkdaKQEHJQKanOWtXxy8RHEOPdum7HWFX6Z3zBTn1bgk2OHYAIb5Hh0x0wm8\r\n8E7g3mUzJiOi2Ag6qu0LV69Ck6CWWe8xOLjEVc9WfWBjOhM0kCT9astrVDHa\r\nkD3H9lkZrh6cTStfYIGcx3B7g8AaGfWsNmCLJ12cz0hBDf4W0ZuupsomYgcq\r\nK6rBX3qGEb4eYENbl6mkSaGjtdJAxDbdLxCjdnRav1ChP5Zm9E17MSCn9FJs\r\nuWA1xPkV4X2iCjC2pAHljsnr31TgwK03bXcxGqsJcGDZuU74Iw5a9DSk0MiV\r\nVnHR0i3+O28GT/IgtK3y2wtMwxDodYUqNf2WPZayF2HbDIHqU/1kJGKI4PUb\r\n+tkuomlb6kUN6nsu7xbK9hGeHNIJfp3H5OQiqaRJoTkaSJ17d6dTCB/KDUPa\r\nOQers+MXmhD9dGusshD8Usa2YjmpU9i+C2oilmOpEp+uh344eG7Hvm9CUlDN\r\nK+X1vfQtxVWfMpzmXE2ii0WXZRrRwkm3MsA=\r\n=YxnB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1aron","email":"aron@master.co"},"directories":{},"maintainers":[{"name":"benseage0","email":"bg012300@gmail.com"},{"name":"1aron","email":"aron@master.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-element.react_2.0.0-beta.5_1672320039195_0.19945134327157255"},"_hasShrinkwrap":false,"deprecated":"Integrate into @master/css.react"},"2.0.0-beta.6":{"name":"@master/style-element.react","scripts":{"build":"aron pack","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Quickly create reusable React elements driven by class names ~800B","author":{"name":"Aoyue Design LLC."},"funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/style-element/issues"},"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"dependencies":{"to-line":"^1.5.0"},"peerDependencies":{"@types/react":">=15","react":">=16.0.0"},"version":"2.0.0-beta.6","readme":"
\n
\n\n

\n \n \n \n \n \"Master\n \n \n

\n

Quickly create reusable React elements driven by class names ~800B

\n\n

\n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"Discord\n \n \n \n \n \n \n \"Follow\n \n \n \n \n \n \n \"Github\n \n \n

\n\n
\n\n\n\n- Styled elements **driven by class names**.\n- Quickly create **reusable** styled elements.\n- Create styled elements with **less code**.\n- **Extend** existing styled elements.\n- **Conditionally construct class names** and strings with template literals.\n\n
\n\n## Concepts\n\n🔴 Traditionally, you would extract a reusable element into a functional component.\n```jsx\nfunction Button(props) {\n return (\n \n )\n}\n```\n🟢 Now, implement the same in one line with **~80% code less**\n```jsx\nconst Button = style.button`inline-flex font:14`\n```\n---\nthen apply it as usual:\n```jsx\nexport default function App() {\n return (\n \n )\n}\n```\nrendered as:\n```html\n\n```\n\n## Feature Overview\n```jsx\nconst Button = style.button(\n 'font:semibold rounded',\n {\n intent: {\n // \n \n )\n}\n```\n\n### Apply additional class names\nAdd `uppercase` for the button here.\n```jsx\nconst Button = style.button`inline-flex font:14`\n\nreturn (\n \n \n)\n```\n\n### Apply class names based on properties\nIf the custom property name isn't the part of the element, you must prefix it with `$` to prevent it from being reflected to the element's attribute or getting type errors.\n```jsx\nconst Button = style.button(\n 'inline-flex font:14',\n ({ $color }) => $color && `font:white bg:${$color}`)\n)\n\nreturn (\n \n \n\n \n \n\n \n \n)\n```\n\n### Transform tag names\nIf you just want to transform a styled element tag name, leave `` empty.\n```jsx\nconst Button = style.button`inline-flex font:14` \n \n\n Anchor\n // Anchor\n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n### Extend styled elements\n```jsx\nconst Button = style.button`inline-flex font:14`\n\n // extend Button with addtional class names\nconst Button1 = el(Button)`text:center`\n\n// extend Button with addtional class names and transform it into \nconst Button2 = style.a(Button)`italic`\n\n// extend Button1 and Button2 with addtional class names\nconst Button3 = el(Button1)(Button2)`font:bold`\n\nreturn (\n \n \n\n Button 1\n \n\n Button 2\n Button 2\n\n Button 3\n \n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n## Related\n- [@master/css](https://github.com/master-co/css) - A Virtual CSS language with enhanced syntax\n- [@master/literal](https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals. ~600B","readmeFilename":"README.md","gitHead":"9f5e6af120884b1b7d7e335feab566f29ab7c903","_id":"@master/style-element.react@2.0.0-beta.6","_nodeVersion":"18.12.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Zfs8mn1E2RO66RZtao0Cf6h+tMvvukdiihKTmecwulwz+YbVUqaxWSI8pVKU1CAuWwOwptBj2NA1d0zeV1BW3A==","shasum":"ceb67e9f42a1cc813dc965c267379ad0eec45891","tarball":"https://registry.npmjs.org/@master/style-element.react/-/style-element.react-2.0.0-beta.6.tgz","fileCount":5,"unpackedSize":16965,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0uZ8IUcIIXV0QvHIRQf0aknkQLNZRHi8coaxPJRde4AIgGcqhN/i9uX+pbHOApTaTxtO4gV7mH2h9EJB3CWel5n0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtOAJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6GQ/+I6EmfysU1GuQOmlGp80l53dqzhFoGFG1qdd3Dr6hcmohGcf8\r\nOatoFfVXCJiTCtlc5fyeIit4YsbuhnJwWMA75QRarhAoYkLWImJuzG7Xcbo+\r\ngPRBmGUbNSQspQBE3wo1ySYleB2b/j/m8iHC0WYzpuFDGjiGTuHYfg04VdPA\r\nq3IYDq4urdX7XFYvLBqMDnqEogkiKfTYzUFCqRmTROg4aReoqq1H0DahhbSS\r\nVeLJapJ9U74bqC5aCNMCIV6P3UVtMiE7L2P2t7ewAABUfvqaGfzUHTFYaH8U\r\ncEzNTZ1u7SOnq0rGAYz2E+bgs3FOON7Z0KLCYvsHQc/4UCwOxxC4Z+sJE4pz\r\nuL4DYlqykLBdgxMHqfcrbLIX0vT0fdv2JbQxyTj/r4tCQr/hg7Sqb+ImHaJ0\r\nqAtTNlpKD0NfhgZqBrv/wBa/9/9JfRZ+k+Bd+VWtTEe7ujMLiias2U66VjEC\r\nJ7EDMpLT9wcQxIBm/T/hp+JOVgqNm8RUu4ipra8HFcboIMZd6X/WRqUQLFev\r\nQ5Byv/BmxaDH7h/wNisF1OTzugEGF38VkoNMheB9ef24OOk3WgjXxHwIrJgQ\r\n9ToAy0dnN9ufe6W2VK2Kby9cHiviAimmn8tC56RYpX5z5r3E9lPdUvoSLR7/\r\n0K972V9MUB2HZyvXAafJ3vWVRw5fNEbZQNw=\r\n=xFDJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1aron","email":"aron@master.co"},"directories":{},"maintainers":[{"name":"benseage0","email":"bg012300@gmail.com"},{"name":"1aron","email":"aron@master.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-element.react_2.0.0-beta.6_1672798217627_0.11662166529046436"},"_hasShrinkwrap":false,"deprecated":"Integrate into @master/css.react"},"2.0.0-beta.7":{"name":"@master/style-element.react","scripts":{"build":"aron pack","dev":"npm run build -- --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Quickly create reusable React elements driven by class names ~800B","author":{"name":"Aoyue Design LLC."},"funding":"https://docs.master.co/css/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/style-element/issues"},"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"publishConfig":{"access":"public"},"dependencies":{"to-line":"^1.5.0"},"peerDependencies":{"@types/react":">=15","react":">=16.0.0"},"version":"2.0.0-beta.7","readme":"
\n
\n\n

\n \n \n \n \n \"Master\n \n \n

\n

Quickly create reusable React elements driven by class names ~800B

\n\n

\n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"NPM\n \n \n \n \n \n \n \"Discord\n \n \n \n \n \n \n \"Follow\n \n \n \n \n \n \n \"Github\n \n \n

\n\n
\n\n\n\n- Styled elements **driven by class names**.\n- Quickly create **reusable** styled elements.\n- Create styled elements with **less code**.\n- **Extend** existing styled elements.\n- **Conditionally construct class names** and strings with template literals.\n\n
\n\n## Concepts\n\n🔴 Traditionally, you would extract a reusable element into a functional component.\n```jsx\nfunction Button(props) {\n return (\n \n )\n}\n```\n🟢 Now, implement the same in one line with **~80% code less**\n```jsx\nconst Button = style.button`inline-flex font:14`\n```\n---\nthen apply it as usual:\n```jsx\nexport default function App() {\n return (\n \n )\n}\n```\nrendered as:\n```html\n\n```\n\n## Feature Overview\n```jsx\nconst Button = style.button(\n 'font:semibold rounded',\n {\n intent: {\n // \n \n )\n}\n```\n\n### Apply additional class names\nAdd `uppercase` for the button here.\n```jsx\nconst Button = style.button`inline-flex font:14`\n\nreturn (\n \n \n)\n```\n\n### Apply class names based on properties\nIf the custom property name isn't the part of the element, you must prefix it with `$` to prevent it from being reflected to the element's attribute or getting type errors.\n```jsx\nconst Button = style.button(\n 'inline-flex font:14',\n ({ $color }) => $color && `font:white bg:${$color}`)\n)\n\nreturn (\n \n \n\n \n \n\n \n \n)\n```\n\n### Transform tag names\nIf you just want to transform a styled element tag name, leave `` empty.\n```jsx\nconst Button = style.button`inline-flex font:14` \n \n\n Anchor\n // Anchor\n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n### Extend styled elements\n```jsx\nconst Button = style.button`inline-flex font:14`\n\n // extend Button with addtional class names\nconst Button1 = el(Button)`text:center`\n\n// extend Button with addtional class names and transform it into \nconst Button2 = style.a(Button)`italic`\n\n// extend Button1 and Button2 with addtional class names\nconst Button3 = el(Button1)(Button2)`font:bold`\n\nreturn (\n \n \n\n Button 1\n \n\n Button 2\n Button 2\n\n Button 3\n \n)\n```\n\n⚠️ Extended sources only accept styled elements.\n\n## Related\n- [@master/css](https://github.com/master-co/css) - A Virtual CSS language with enhanced syntax\n- [@master/literal](https://github.com/master-co/literal) - Conditionally construct class names and strings with template literals. ~600B","readmeFilename":"README.md","gitHead":"c8777a5d57594f3c678a197a30d21fb3be5b5825","_id":"@master/style-element.react@2.0.0-beta.7","_nodeVersion":"18.12.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-QfEk2B2epFLXI85IVRMfpFFDk94wv3R52P3NLAuG/dpMa1zxuHxOYlVNzZ/Us7kVEknSxOtMDpP8zkdIqDdhKg==","shasum":"43f55d480d2c6b708d56dd0e5f35fafeee0f6fa6","tarball":"https://registry.npmjs.org/@master/style-element.react/-/style-element.react-2.0.0-beta.7.tgz","fileCount":5,"unpackedSize":16951,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZT8m+lhXshZ8XKOXj82zRC3x7Mccjd46Uq3KswDJBfAiEA0gpZZzbTvHTxuZgynRbzx6xi7pu9UXY+JW+z6PxxQQM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4FQvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6ow/+KC+KKz7H6ROoiWeoY7nvbYwT7h1CSrOt16l66Kih/H0ydxW9\r\nrEu1y/BP7JqcDYt2BbwYU6AtEP0/12bOvLhY/HWnV4rMQCPec7pK7nFmP+wj\r\nT0WNxosLRU49unZN1+ybYUCTkDsB13dU2hJWUEK91WEpOYkLz7ctZyK8g/Tn\r\n3s2oQTv5Skg65OwJcGuPDSJTX0n5RFT6gOncMpKlQDNv//Xgk9qIK4wa+Yak\r\nZWIGw4pmQZ5RCcvveqoG240S70AWttfOGMB9KvtETvGeQ/QvCDu7rl05OB60\r\nkvxtDzzS31wIN9rBf1LGaV452ciSc7Mq+22JnSKcT/cwhEO5GqgHaVLDB95K\r\n1GKuzFH4/RXZxnnbqBXQpKAjo4I0EKWFrzI84UnZxvnFcH2wj9g8fh1jbJrT\r\ney4M6/LllLO1Ug9lmlURthhyERdNBKtSFA0P+m4BDtyyiXYUSJf3BtpIJVLc\r\nH4S+9V8wvtYQecq7sE7VRPcAmXrmC3HS+yv5wz+9Z84Baz+SrMDPFfQjhGWQ\r\nKw4eijtdnioJBWCPSezSCWaojF8yrFBSoj0gJ/pZTYL0yGhvEtYfIKdVXmcm\r\nsCJKo2bo3FrrMbcfutjjhMSEunAUehlRXictGKTJHUKAuc7RpqBP4DY42hfD\r\noa3zTuaqS7sFtPlRyZplw/o0BDXyWU8JyWw=\r\n=UXFx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1aron","email":"aron@master.co"},"directories":{},"maintainers":[{"name":"benseage0","email":"bg012300@gmail.com"},{"name":"1aron","email":"aron@master.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-element.react_2.0.0-beta.7_1675645999798_0.7564759196873212"},"_hasShrinkwrap":false,"deprecated":"Integrate into @master/css.react"}},"maintainers":[{"name":"1aron","email":"aron@master.co"},{"name":"benseage0","email":"bg012300@gmail.com"}],"description":"Quickly create reusable React elements driven by class names ~800B","homepage":"https://css.master.co","keywords":["styled","component","element","css","react","styled-component","class-name","reactjs","nextjs","solidjs"],"repository":{"type":"git","url":"git+https://github.com/master-co/style-element.git","directory":"packages/react"},"author":{"name":"Aoyue Design LLC."},"bugs":{"url":"https://github.com/master-co/style-element/issues"},"license":"MIT","readme":"","readmeFilename":""}