{"_id":"@accio-ui/ui","name":"@accio-ui/ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@accio-ui/ui","version":"1.0.0","description":"Design system with react","repository":{"type":"git","url":"git+https://github.com/alexeiaccio/react-tsx.git"},"keywords":["react"],"author":{"name":"Alexei Accio","email":"alexei.accio@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/alexeiaccio/react-tsx/issues"},"homepage":"https://github.com/alexeiaccio/react-tsx#readme","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","publishConfig":{"access":"public"},"dependencies":{"@react-aria/button":"^3.7.0","@react-aria/ssr":"^3.5.0","@react-aria/utils":"^3.15.0","@accio-ui/colors":"1.0.0","@accio-ui/react-tsx":"1.0.0"},"devDependencies":{"@csstools/postcss-oklab-function":"^2.1.0","@fwoosh/components":"0.0.126","@fwoosh/decorator-centered":"^0.0.126","@fwoosh/panel-actions":"0.0.126","@fwoosh/panel-designs":"0.0.126","@fwoosh/panel-props":"0.0.126","@fwoosh/panel-source":"0.0.126","@fwoosh/panel-story-description":"0.0.126","@fwoosh/react":"0.0.126","@fwoosh/styling":"0.0.126","@fwoosh/test":"^0.0.126","@fwoosh/tool-github":"0.0.126","@fwoosh/tool-measure":"0.0.126","@fwoosh/tool-viewport":"0.0.126","@fwoosh/tool-zoom":"0.0.126","@fwoosh/types":"0.0.126","@playwright/test":"^1.31.2","@radix-ui/colors":"^0.1.8","@types/node":"^18.15.3","@types/react":"^18.0.28","@types/react-dom":"^18.0.11","autoprefixer":"^10.4.14","cva":"npm:class-variance-authority@^0.4.0","fwoosh":"^0.0.126","postcss":"^8.4.21","react":"^18.2.0","react-dom":"^18.2.0","rome":"^11.0.0","tailwind-merge":"^1.10.0","tailwindcss":"^3.2.7","tsup":"^6.6.3","typescript":"^5.0.2"},"peerDependencies":{"react":"^18"},"scripts":{"test:e2e":"playwright test","fwoosh":"fwoosh dev","fwoosh:build":"fwoosh build","fwoosh:serve":"fwoosh serve","build":"tsup src/index.ts --format cjs,esm --dts","dev":"tsup src/index.ts --format esm,cjs --watch --dts","lint":"tsc && rome check --apply-suggested . && rome format --write .","clean":"rm -rf dist && rm -rf out && rm -rf .turbo"},"typesVersions":{"*":{"*":["dist/index.d.ts"]}},"_id":"@accio-ui/ui@1.0.0","_integrity":"sha512-f3WKnZejgOjFhZWdYl/62CT+wr/xlw9kyZ7+J7omvq0b4xFIpqR4FxgfeRtZc+NRQjBoJ9DNfbiT0q2BJew7ZQ==","_resolved":"/tmp/7411503d2cd2c89a0a40dc5e5b3150d4/accio-ui-ui-1.0.0.tgz","_from":"file:accio-ui-ui-1.0.0.tgz","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-f3WKnZejgOjFhZWdYl/62CT+wr/xlw9kyZ7+J7omvq0b4xFIpqR4FxgfeRtZc+NRQjBoJ9DNfbiT0q2BJew7ZQ==","shasum":"aa56133bdf18ce5a68bd39bb6be09d1bbf54c00f","tarball":"https://registry.npmjs.org/@accio-ui/ui/-/ui-1.0.0.tgz","fileCount":7,"unpackedSize":150495,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICNbGTQXTasbbt6j8zhIMYx5heFczd/QZBiLJGZne7unAiEAtXQjVnbp3lQkYtyEdfSo/9ggDeSJr3zzea16Ia+Ssf8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGzIAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+xw//c/kNFsoADgz84bqYmPkLzPXkKyqtFARrMLRGxbcK0N3tV6di\r\nhuqkF4jdJWUFp2YeoScApVINsyXG22cvOM5b/mMyfw6l/P96V8COY6UFNww5\r\nOdXpVqdn4YTtTh6GSpBZDLRTUGXAqVfdreqNoXM5gj4Z6XckuT40V5M3Z/oY\r\nXBps/gup5X4IHrHeVMN3Vay8X+3WAbgYHG2Ygue8+6dheHEnJztTisjqL13s\r\nAaSjGGb7kmXBWMT4f4JNmxzWcM5UIZfWbok2WNS0javojIwZ+xBu+yMKMcKq\r\n1WKlOcFxbBoRB85DN1qgk3FlBeRPXHfmV4nj3iKsP/4NPJ8cZD0NhpPCmvyu\r\nH+pPESvwDz8WP08iz4xW8qxbY0zvzUuUf9fsQr13QuV5iRICpEhsPx/UkUty\r\nzkE6NLXTIEQntSsIaSnd8PjtEKhdBFmkCvaHkoofzbnikdT36YgCo5uUrpoY\r\n9aRskrMR671Z3buMtZ+7yBRr7acIomVK/MtKC68UbYUBYK3d8VjNUX2k0ff1\r\nN7mvfdS5VNRLvmcwjpO/zNQHieiguDH9ISe+NLBWMJJo17HewH4ACG9yl6uH\r\nfNHPTBfoHI92Dv5pT0qHjAH1byctzUfGzyROOiAARUOyrpxSHjkYpG6oaj4p\r\nnMzae8m9tAixnXwS7M3bbCSp0qUTc9FodcA=\r\n=VVgy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexei.accio","email":"alexei.accio@gmail.com"},"directories":{},"maintainers":[{"name":"alexei.accio","email":"alexei.accio@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0_1679503872172_0.7999187050202345"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-22T16:51:12.084Z","1.0.0":"2023-03-22T16:51:12.339Z","modified":"2023-03-22T16:51:12.543Z"},"maintainers":[{"name":"alexei.accio","email":"alexei.accio@gmail.com"}],"description":"Design system with react","homepage":"https://github.com/alexeiaccio/react-tsx#readme","keywords":["react"],"repository":{"type":"git","url":"git+https://github.com/alexeiaccio/react-tsx.git"},"author":{"name":"Alexei Accio","email":"alexei.accio@gmail.com"},"bugs":{"url":"https://github.com/alexeiaccio/react-tsx/issues"},"license":"MIT","readme":"# react-tsx\n\nHeadless primitives for react\n\n## If\n\n### `<If />` with one/two children\n\nIf component allows to render children only if condition is true\n\n```tsx\nimport { If } from \"@accio-ui/react-tsx\";\n\n<If test={condition}>\n  <>Show me if conditioin is true</>\n  <>Show me if conditioin is false</>\n</If>;\n/**\n * @prop {unknown} test - Condition to show if condition is truthy.\n * @prop {React.ReactNode | (arg: NonNullable<T>) => React.ReactNode} children - First child will be shown if condition is truthy, second one – if it is falsy.\n */\n```\n\nor use `<Else />` and `<IfElse />` and function-as-a-child to get access to `NonNulable<typeof test>` value\n\n```tsx\nimport { If, IfElse, Else } from '@accio-ui/react-tsx'\n\n<If\n test={{arg: \"A\"}}\n>\n {(data) => <>{data.arg}</>\n //              ^? { arg: string }\n <Else>B</Else>}\n// will render \"A\"\n<If test={false}>\n <>A</>\n <ElseIf test={true}>\n  <>B</>\n  <Else>C</Else>\n </ElseIf>\n</If>\n// will render \"B\"\n<If test={false}>\n <>A</>\n <If.ElseIf test={false}>\n  <>B</>\n  <If.Else>C</If.Else>\n </If.ElseIf>\n</If>\n// will render \"C\"\n```\n\n### `<If />` with `then` and `else`\n\nIf component must have `then` or `else` props.\n\n```tsx\n<If\n test={true}\n then={<>A</>}\n else={<>B</>}\n/>\n// will render \"A\"\n<If\n test={false}\n then={<>A</>}\n else={<>B</>}\n/>\n// will render \"B\"\n/**\n * @prop {unknown} test - Condition to show if condition is truthy.\n * @prop {React.ReactNode | (arg: NonNullable<T>) => React.ReactNode} then - Content to show if condition is truthy\n * @prop {React.ReactNode} else - Content to show if condition is falsy.\n*/\n```\n\n### `<If />` with `fallback`\n\nIf component must have at least one child or `fallback` prop.\n\n```tsx\n<If test={true} fallback={B}>\n A\n</If>\n// will render \"A\"\n<If test={false} fallback={B}>\n A\n</If>\n// will render \"B\"\n/**\n* @prop {unknown} test - Condition to show if condition is truthy.\n* @prop {React.ReactNode} children - Content to show if condition is truthy.\n* @prop {React.ReactNode} fallback - Content to show if condition is falsy.\n```\n\n## Switch\n\n```tsx\nimport { Switch } from \"@accio-ui/react-tsx\";\n\nconst union = \"idle\" | \"loading\" | \"error\" | \"success\";\n\n<Switch expression={union} exhaustive>\n  <Switch.Case value={\"idle\"}>Idle</Switch.Case>\n  <Switch.Case value={\"loading\"}>Loading</Switch.Case>\n  <Switch.Case value={\"error\"}>Error</Switch.Case>\n  {/* <Switch.Case value={\"success\"}>Success</Switch.Case> */}\n  {/* <Switch.Default>Default</Switch.Default> */}\n</Switch>;\n// will cause of type error because of `exhaustive` prop\n```\n\n## Progress\n\n- [x] `<If />`\n  - [x] `<ElseIf />`\n  - [x] `<Else />`\n- [ ] `<Switch />`\n- [ ] `<Match />`\n- [ ] `<For />`\n\n## Credits\n\n- React Velcro\n  - [react-loops](https://github.com/leebyron/react-loops)\n  - [react-condition](https://github.com/andrewfluck/react-condition)\n","readmeFilename":"README.md"}