\n \n)\n```\n\n### NoSSR\n\nSometimes you want to render a component only on the client, and have a skeleton\nor fallback component rendered on the server, whether for SSR or static output.\n\n```tsx\nimport { NoSSR } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n This is only rendered on the client\n\n {/* Skeleton is rendered on SSR/SSG, TheRealThing is rendered on the client.*/}\n }>\n \n \n \n)\n```\n\n## Examples\n\nHeader with navigation links:\n\n```tsx\nimport { Box, Stack } from '@chakra-ui/core'\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () => (\n \n \n Features\n Pricing\n Documentation\n \n \n)\n```\n\n## License\n\n[MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).\n","readmeFilename":"README.md","gitHead":"728fb932737c875410cab49e202c2876959940d1","bugs":{"url":"https://github.com/47ng/chakra-next/issues"},"homepage":"https://github.com/47ng/chakra-next#readme","_id":"@47ng/chakra-next@2.5.0-beta.1","_nodeVersion":"12.20.1","_npmVersion":"6.14.10","dist":{"integrity":"sha512-RWQeJphyITI0GBAJIhmavtBl1LhOCmHMA6TXzqBx7Ev2JdWQ79urbsBzMziA+Hq6yBlxeLh6yqPu42iWdUvQpw==","shasum":"3da4d9a6523d3987e10ddfb2e6a0e9b07d468d13","tarball":"https://registry.npmjs.org/@47ng/chakra-next/-/chakra-next-2.5.0-beta.1.tgz","fileCount":21,"unpackedSize":21653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD5+iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYCBAAlov8s0PaYjZUMznFg7Y6fURl4k7oL4U2SDwMicbsAcSyiBEz\r\nO2C0I0swEJuor57qOZHeWmt78HdHQMxB5nZWCxSD5ewmiKnyKdDtOtvzpmJ/\r\ntWX/9Lq55mLI5OmpsRYzJt6uJbcvpPoXOiFifH4kvpENCKgmwvhvpHR0bFsd\r\nQSBHia7xblxzTMutxU3AqzxnkgjcplupdK3EoKKUtQjT5XTC76pqfwFDDatR\r\nPte7tT5M8s+O42Hcbd8eMvR7it7n8r+zbkitHNFgTTlO/+GnH9PFCdhDfQOI\r\nwaHX0s++frkWGiHnFEkbK+HzVjLx0GpOPD6c2YdiyZ5VpCQqtyRxIdZSd1Ib\r\n5I3G5HWXnY5zi6mhi+kqPhFFTUmh2rViDw5dJWsRVwHt3bn30MJ6nFKY1e+x\r\niWYTwu9Bos/3XcdfRvoKnMaQM47U0ihMshrFAaR/bHjNrou1EhdJe+Qu3RY/\r\nBNPUEwn8bP4a7wwEXnYDtMKgT7cNJZEHQIuPlCGcE2z24eWf13f1gj40ukVO\r\nAvjkfUqkQ9mKRDUc0hdrOOl+MDyuVyg0ohtDigG94YyJP7HeXgo/wpPpSyIQ\r\n1SQioCuCii1ipdOdfpfB2o3797iUtvsGSfar10QovQLcHjqw9n9+dqbYgZPq\r\n0weE9gCuBhsyKQQVgISrKU/OUow3sVhWbtw=\r\n=WZ47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBc/VHmF9K1gtF7wMcZp3FeqfFk8hgdx96hcMM2gD2eAiBCLTl41otmEWN5Ag5ogCWqwvufI1nLhFfR5dkS81/56g=="}]},"_npmUser":{"name":"franky47","email":"accounts@francoisbest.com"},"directories":{},"maintainers":[{"name":"franky47","email":"accounts@francoisbest.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chakra-next_2.5.0-beta.1_1645191073866_0.5819949966435976"},"_hasShrinkwrap":false},"3.0.0-beta.5":{"name":"@47ng/chakra-next","version":"3.0.0-beta.5","description":"Design System for React, based on Chakra UI + Next.js, written in TypeScript.","type":"module","module":"dist/index.js","types":"dist/index.d.ts","exports":"./dist/index.js","sideEffects":false,"license":"MIT","author":{"name":"François Best","email":"contact@francoisbest.com","url":"https://francoisbest.com"},"repository":{"type":"git","url":"git+https://github.com/47ng/chakra-next.git"},"keywords":["react","design-system","next.js","chakra-ui"],"publishConfig":{"access":"public"},"scripts":{"dev":"next","test":"jest --coverage","prebuild":"rm -rf ./dist","build":"run-p build:*","build:esm":"swc ./src --out-dir ./dist","build:dts":"tsc --project tsconfig.types.json","ci":"run-s build test","prepare":"husky install"},"dependencies":{},"peerDependencies":{"@chakra-ui/react":"^1","next":">=12","react":">=17"},"devDependencies":{"@chakra-ui/react":"^1.8.3","@commitlint/config-conventional":"^16.2.1","@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mdx-js/loader":"^2.0.0","@next/mdx":"^12.1.0","@swc/cli":"^0.1.55","@swc/core":"^1.2.141","@swc/helpers":"^0.3.3","@swc/jest":"^0.2.17","@testing-library/jest-dom":"^5.16.2","@testing-library/react":"^12.1.3","@types/jest":"^27.4.0","@types/node":"^17.0.18","@types/webpack":"^5.28.0","commitlint":"^16.2.1","framer-motion":"^6.2.6","husky":"7.x","jest":"^27.5.1","next":"^12.1.0","next-compose-plugins":"^2.2.1","npm-run-all":"^4.1.5","react":"^17.0.2","react-dom":"^17.0.2","react-icons":"^4.3.1","ts-jest":"^27.1.3","ts-node":"^10.5.0","typescript":"^4.5.5"},"engines":{"node":"^12.20.0 || ^14.13.1 || >=16.0.0"},"jest":{"verbose":true,"transform":{"^.+\\.(t|j)sx?$":["@swc/jest"]},"testEnvironment":"jsdom","testMatch":["/src/**/*.test.[jt]s?(x)"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"commitlint":{"extends":["@commitlint/config-conventional"],"rules":{"type-enum":[2,"always",["build","chore","ci","clean","doc","feat","fix","perf","ref","revert","style","test"]],"subject-case":[0,"always","sentence-case"],"body-leading-blank":[2,"always",true]}},"readme":"@47ng/chakra-next
\n\n\n\n[](https://www.npmjs.com/package/@47ng/chakra-next)\n[](https://github.com/47ng/chakra-next/blob/next/LICENSE)\n[](https://github.com/47ng/chakra-next/actions)\n[](https://coveralls.io/github/47ng/chakra-next?branch=next)\n\n
\n\n\n Opinionated design system for React, based on Chakra UI + Next.js.\n
\n\n## Features\n\n- Default theme with semantic tokens\n- 100% TypeScript, transpiled to ESM (requires Next.js 12+)\n- Components:\n - 🔗 [Links](#links)\n - ◻️ [Cards](#cards)\n - 🎨 [Svg](#svg)\n - ➡️ [Redirect](#redirect)\n - 🚧 [NoSSR](#nossr)\n - 🧪 _More to come_\n\n## Installation\n\nIn your Next.js app:\n\n```shell\n$ npm install @47ng/chakra-next\n```\n\n## Theme tools\n\nTo resolve theme tokens across color modes, use `useColorModeToken`:\n\n```ts\nimport { useColorModeToken } from '@47ng/chakra-next'\n\nconst fill = useColorModeToken('red.500', 'blue.500')\nconst shadow = useColorModeToken('md', 'dark-lg', 'shadows')\n```\n\nThe following semantic tokens are provided:\n\n- colors:\n - `body` (follows the html/body/\\_\\_next background color)\n - `text.dim`\n - `text.dimmer`\n - `text.dimmest`\n - `card.bg`\n- shadows:\n - `card.shadow` _(make card shadow darker in dark mode to stand out)_\n\n## Components\n\n### Links\n\n```tsx\nimport { RouteLink, OutgoingLink, ButtonRouteLink } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n {/* Integrate Next.js routes with Chakra styles */}\n Login\n\n {/* Use `as` for dynamic routes */}\n Login\n\n {/* Make external links stand out */}\n \n GitHub\n \n\n {/* For when a button looks better, still outputs an tag */}\n Logout\n \n)\n```\n\n#### NavLinks\n\nUse `NavLink` when you want a link to have special styling depending on\nthe current page.\n\nBy default, NavLinks:\n\n- Underline their text when active\n- Are active when the current path starts with the link path\n\nExample:\n\n```tsx\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n Blog\n \n)\n```\n\nThe link will be active for the following paths:\n\n| Path | Active |\n| ----------- | ------- |\n| `/home` | `false` |\n| `/blog` | `true` |\n| `/blog/` | `true` |\n| `/blog/foo` | `true` |\n\n##### Custom active styles\n\n```tsx\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n \n Blog\n \n \n)\n```\n\n##### Exact paths\n\nSometimes, you want the NavLink to be active only on exact route\nmatches:\n\n```tsx\nimport { NavLink, navLinkMatch } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n \n Home\n \n \n)\n```\n\nYou can also have custom logic to determine whether a NavLink should\nbe active:\n\n```tsx\nimport { NavLink, navLinkMatch } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n \n navLinkMatch.exact({ to, as, router }) &&\n router?.query.active === 'true'\n }\n >\n Another Blog Post\n \n \n)\n```\n\n### Redirect\n\n`Redirect` will change the current URL to the one given, when mounted.\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default ({ loggedIn }) => (\n <>{loggedIn ? Hello ! : }\n)\n```\n\nBy default, the redirection will be pushed onto the navigation history stack.\nYou can replace the history stack instead with the `replace` prop:\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n \n \n)\n```\n\nNext.js dynamic paths are also supported:\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n \n \n)\n```\n\nIf you want to [redirect to an external link](https://github.com/vercel/next.js/blob/main/errors/invalid-href-passed.md)\n(not an internal route), you will have to set the `external` prop:\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n \n\n {/* You can also have the history replaced with external URLs: */}\n \n \n)\n```\n\nYou can also pass transition options:\n\n```tsx\n\n```\n\n### Cards\n\n```tsx\nimport { Card, cardProps } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n {/* Card as Box */}\n I'm in a card\n\n {/* Apply Card styles to a custom component */}\n \n \n)\n```\n\n### Svg\n\nExtends `chakra.svg` with with:\n\n- SVG namespace pre-filled\n- `role=\"img\"`\n\n```tsx\nimport { Svg } from '@47ng/chakra-next'\n\nexport default () => (\n \n A red circle\n \n Svg lets you style SVG container tags with Chakra UI style props.\n \n \n \n)\n```\n\nNote: to use theme tokens for fills, strokes and other SVG properties, you must\nresolve them first:\n\n```tsx\nimport { useToken } from '@chakra-ui/react'\n\nexport default () => (\n \n A red circle\n \n Svg lets you style SVG container tags with Chakra UI style props.\n \n \n \n)\n```\n\n### NoSSR\n\nSometimes you want to render a component only on the client, and have a skeleton\nor fallback component rendered on the server, whether for SSR or static output.\n\n```tsx\nimport { NoSSR } from '@47ng/chakra-next'\n\nexport default () => (\n <>\n This is only rendered on the client\n\n {/* Skeleton is rendered on SSR/SSG, TheRealThing is rendered on the client.*/}\n }>\n \n \n \n)\n```\n\n## Examples\n\nHeader with navigation links:\n\n```tsx\nimport { Box, Stack } from '@chakra-ui/core'\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () => (\n \n \n Features\n Pricing\n Documentation\n \n \n)\n```\n\n## License\n\n[MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).\n","readmeFilename":"README.md","gitHead":"f5c028d263db100363c1328bc242bff547b1f954","bugs":{"url":"https://github.com/47ng/chakra-next/issues"},"homepage":"https://github.com/47ng/chakra-next#readme","_id":"@47ng/chakra-next@3.0.0-beta.5","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-gM2wmiGZHD1oLBEiNSwzG038DMtQbHjKQAk+4Ml4JEf7/+cArhApFZqUbpvHkqxbqug6ju6esxkH8t3hUrqqYw==","shasum":"0c31bc9eabe5f96073e95e437e27c493ec8b6564","tarball":"https://registry.npmjs.org/@47ng/chakra-next/-/chakra-next-3.0.0-beta.5.tgz","fileCount":19,"unpackedSize":22824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD6gBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3zA/9HbtIzIFdGRruQdjxM3PXXS017VkvZhBBoPF5X5eIGgf8te6k\r\nlUKoY0ISa/xcFXYKYh0ngZwjc3EtRKZkaT2SvGTA1BLQaEZSe6RI40CpHhUd\r\nNy29ZXS34h/D2hxrCiKs+gEu01F3ohjhBD9P0n1BGmFRiFbnigDu38jkIZ6e\r\n6QS6M3sAvRnWiQiXX+X1MFkbhEHi0I1LdxLCaI+Esa04eG+Cg1KyMkB6O1Fh\r\n840H6LRq27/GfdbPSySCU8F5bi0KXJFv35iFKkfSS0fiTs7QWsBTrTODrexd\r\ntVBFZp3Qiy9q8FhxPmyUveXEzg7EVxMA5c3ihTZ6f4z+gocAEVJmKINxV1j9\r\n7CpiAgiX4UnHogtuZQLFg6DtDfGEjJoDX7NZTYdWvNlH8uGqnJZIbDWXEayA\r\nB9Gvf1Bz0Nw6RESb8k2IJDcgg5EEIUln5rn+Q4oA6jHxdzy8fDBRoQ+nwyk+\r\nE6LNN4Z4f/T6Sr2p7woslTU50Jr7EciVTwsAd4HIx75e44H92F/nU2P9PEv+\r\nLtO8b/uN4l1WZhAcyIUHQqJ9M5ZkjpGozsVBpB4e6KMjkwme3KzyKXmb4t2y\r\n8/sx/5KaD+Q/867JiYB59R93kG2Q/Z0uyXr3O+SSr/R/Yv+4ZOsRnKDGpggY\r\n1jBmXpxakDX/ojIJZ/BWGKsBpdXR5e9hEkE=\r\n=aDPM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyryh8zK2oXOG80PoOMJ+Hgu5EFvlQNs5GTxS6GeuF+AiA9QZit3323fswWXYoBu1TWXAnT6F6L3xmBqcJLMqrIHA=="}]},"_npmUser":{"name":"franky47","email":"accounts@francoisbest.com"},"directories":{},"maintainers":[{"name":"franky47","email":"accounts@francoisbest.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chakra-next_3.0.0-beta.5_1645193217831_0.9583297726876061"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-02T13:37:47.595Z","1.0.0":"2020-04-02T13:37:47.862Z","modified":"2022-04-04T10:45:56.406Z","1.0.1":"2020-04-02T13:46:08.010Z","1.0.2":"2020-04-02T13:53:04.595Z","1.0.3":"2020-04-02T15:10:30.979Z","1.1.0":"2020-04-02T16:45:55.109Z","1.1.1":"2020-04-02T16:49:07.240Z","1.2.0":"2020-04-05T09:25:34.688Z","1.3.0":"2020-04-09T07:39:14.063Z","1.4.0":"2020-04-09T13:08:57.576Z","2.0.0":"2020-04-09T13:31:29.479Z","2.0.1":"2020-04-11T11:48:46.718Z","2.1.0":"2020-04-13T11:57:10.402Z","2.1.1":"2020-04-13T12:38:35.651Z","2.1.2":"2020-04-15T19:28:56.049Z","2.2.0":"2020-04-21T17:13:44.934Z","2.3.0":"2020-05-26T11:20:32.822Z","2.3.1":"2020-05-26T11:32:49.782Z","2.4.0":"2020-05-26T11:50:22.367Z","2.4.1":"2020-05-26T12:17:43.847Z","2.4.2":"2020-05-27T07:29:36.717Z","3.0.0-beta.1":"2020-12-02T12:34:55.201Z","3.0.0-beta.2":"2020-12-11T08:12:45.831Z","3.0.0-beta.3":"2021-01-08T15:52:42.246Z","3.0.0-beta.4":"2021-01-23T10:37:25.549Z","2.5.0-beta.1":"2022-02-18T13:31:14.037Z","3.0.0-beta.5":"2022-02-18T14:06:57.957Z"},"maintainers":[{"name":"franky47","email":"accounts@francoisbest.com"}],"description":"Design System for React, based on Chakra UI + Next.js, written in TypeScript.","homepage":"https://github.com/47ng/chakra-next#readme","keywords":["react","design-system","next.js","chakra-ui"],"repository":{"type":"git","url":"git+https://github.com/47ng/chakra-next.git"},"author":{"name":"François Best","email":"contact@francoisbest.com","url":"https://francoisbest.com"},"bugs":{"url":"https://github.com/47ng/chakra-next/issues"},"license":"MIT","readme":"","readmeFilename":""}