{"_id":"@axvn-hoding/ui-toolkit","name":"@axvn-hoding/ui-toolkit","dist-tags":{"latest":"2.10.3"},"versions":{"2.10.3":{"name":"@axvn-hoding/ui-toolkit","version":"2.10.3","description":"A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","license":"SEE LICENSE IN https://raw.githubusercontent.com/blockscout/frontend/refs/heads/main/LICENSE","author":{"name":"Blockscout Team"},"repository":{"type":"git","url":"git+https://github.com/blockscout/frontend.git","directory":"src/src/toolkit/package"},"homepage":"https://github.com/blockscout/frontend/tree/main/src/toolkit/package","bugs":{"url":"https://github.com/blockscout/frontend/issues"},"keywords":["blockscout","ui","components","chakra-ui","react","typescript","design-system"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"vite build","dev":"vite","typecheck":"tsc --noEmit"},"peerDependencies":{"@chakra-ui/react":">=3.36.1","@emotion/react":">=11.14.0","next":">=16.2.6","next-themes":">=0.4.4","react":">=18.3.1","react-dom":">=18.3.1","react-hook-form":">=7.52.1"},"devDependencies":{"@svgr/plugin-jsx":"8.1.0","@types/node":"20.16.7","@types/react":"18.3.12","@types/react-dom":"18.3.1","@typescript/native":"npm:typescript@7.0.2","@vitejs/plugin-react":"4.3.4","typescript":"npm:@typescript/typescript6@6.0.2","vite":"6.4.3","vite-plugin-dts":"4.5.4","vite-plugin-svgr":"4.5.0","vite-tsconfig-paths":"5.1.4"},"engines":{"node":">=22.14.0"},"publishConfig":{"access":"public"},"_id":"@axvn-hoding/ui-toolkit@2.10.3","_integrity":"sha512-BdQMXwDq46mfoj5B/pWd+HV4s7pn9ucAYQvzzJoYZQ7hdnTfIgiNBUe2i0gNJEb3OU8IH4g4FAcopxh5gTN9hA==","_resolved":"/tmp/axvn-npm-repacked/axvn-hoding-ui-toolkit-2.10.3.tgz","_from":"file:/tmp/axvn-npm-repacked/axvn-hoding-ui-toolkit-2.10.3.tgz","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-BdQMXwDq46mfoj5B/pWd+HV4s7pn9ucAYQvzzJoYZQ7hdnTfIgiNBUe2i0gNJEb3OU8IH4g4FAcopxh5gTN9hA==","shasum":"01e22ca0cc2dbdf04ed3b6a13c9666233e866918","tarball":"https://registry.npmjs.org/@axvn-hoding/ui-toolkit/-/ui-toolkit-2.10.3.tgz","fileCount":255,"unpackedSize":791365,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCW9ghclrKT2Pq6WXJu4v/eiAtLcZtK5GMz2JzNZVuTnAIgYkfLJW8nCMZ8x/b/FIic5uol3GZLgzaVrQG9LsZ4/sw="}]},"_npmUser":{"name":"axvn-network","email":"namlangtu20162@gmail.com"},"directories":{},"maintainers":[{"name":"avnkr","email":"alisababivip@gmail.com"},{"name":"axvn-network","email":"namlangtu20162@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-toolkit_2.10.3_1786787452676_0.7314556356790725"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-15T09:50:52.530Z","2.10.3":"2026-08-15T09:50:52.846Z","modified":"2026-08-15T09:50:53.096Z"},"maintainers":[{"name":"avnkr","email":"alisababivip@gmail.com"},{"name":"axvn-network","email":"namlangtu20162@gmail.com"}],"description":"A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects","homepage":"https://github.com/blockscout/frontend/tree/main/src/toolkit/package","keywords":["blockscout","ui","components","chakra-ui","react","typescript","design-system"],"repository":{"type":"git","url":"git+https://github.com/blockscout/frontend.git","directory":"src/src/toolkit/package"},"author":{"name":"Blockscout Team"},"bugs":{"url":"https://github.com/blockscout/frontend/issues"},"license":"SEE LICENSE IN https://raw.githubusercontent.com/blockscout/frontend/refs/heads/main/LICENSE","readme":"# Blockscout UI Toolkit\n\nA comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects. This toolkit provides a consistent design system and UI components to maintain visual consistency across Blockscout applications.\n\n## Features\n\n- 🎨 Pre-configured Chakra UI theme with Blockscout's design system\n- 🧩 Reusable UI components built on Chakra UI\n- 🌓 Built-in dark mode support\n- 📱 Responsive and accessible components\n- 🔍 TypeScript support with proper type definitions\n\n## Installation\n\n### Package Installation\n\nInstall the package using your preferred package manager:\n\n```bash\n# Using npm\nnpm install @blockscout/ui-toolkit\n\n# Using pnpm\npnpm add @blockscout/ui-toolkit\n```\n\n### Required Dependencies\n\nEnsure you have the following peer dependencies installed:\n\n```json\n{\n  \"dependencies\": {\n    \"@blockscout/ui-toolkit\": \"latest\",\n    \"@chakra-ui/react\": \">=3.36.1\",\n    \"@emotion/react\": \">=11.14.0\",\n    \"@uidotdev/usehooks\": \">=2.4.1\",\n    \"d3\": \">=7.6.1\",\n    \"dayjs\": \">=1.11.5\",\n    \"dom-to-image\": \">=2.6.0\",\n    \"es-toolkit\": \">=1.39.10\",\n    \"next\": \">=16.2.4\",\n    \"next-themes\": \">=0.4.4\",\n    \"react\": \">=18.3.1\",\n    \"react-dom\": \">=18.3.1\",\n    \"react-hook-form\": \">=7.52.1\"\n  },\n  \"devDependencies\": {\n    \"@chakra-ui/cli\": \">=3.36.1\",\n    \"@types/node\": \"^20\",\n    \"@types/react\": \"18.3.12\",\n    \"@types/react-dom\": \"18.3.1\",\n    \"typescript\": \"5.4.2\"\n  }\n}\n```\n\n## Quick Start\n\n### 1. Theme Setup\n\nCreate a `theme.ts` file in your project and configure the Blockscout theme:\n\n```tsx\n// Basic setup\nimport { theme } from '@blockscout/ui-toolkit';\nexport default theme;\n```\n\nOr extend the theme with custom overrides:\n\n```tsx\nimport { createSystem } from '@chakra-ui/react';\nimport { themeConfig } from '@blockscout/ui-toolkit';\n\nconst customOverrides = {\n  // Add your custom theme overrides here\n  theme: {\n    semanticTokens: {\n      colors: {\n        brand: {\n          primary: { value: '#5353D3' }\n        },\n      },\n    },\n  },\n};\n\nexport default createSystem(themeConfig, customOverrides);\n```\n\n### 2. Provider Setup\n\nWrap your application with the ChakraProvider:\n\n```tsx\nimport { ChakraProvider } from '@chakra-ui/react';\nimport { Button } from '@blockscout/ui-toolkit';\nimport theme from './theme';\n\nfunction App() {\n  return (\n    <ChakraProvider theme={theme}>\n      <Button>Click me</Button>\n    </ChakraProvider>\n  );\n}\n```\n\n### 3. TypeScript Support\n\nAdd the following script to your `package.json` to generate Chakra UI type definitions:\n\n```json\n{\n  \"scripts\": {\n    \"chakra:typegen\": \"chakra typegen ./src/theme.ts\"\n  }\n}\n```\n\n## Development\n\n### Local Development\n\n1. Clone the repository and install dependencies:\n```bash\npnpm\n```\n\n2. Start the development server:\n```bash\npnpm dev\n```\n\n3. Build the package:\n```bash\npnpm build\n```\n\n### Publishing\n\n#### Manual Publishing\n\n1. Update the package version:\n```bash\nnpm version <version-tag>\n```\n\n2. Build the package:\n```bash\nnpm run build\n```\n\n3. Publish to NPM:\n```bash\nnpm publish --access public\n```\n\n#### Automated Publishing\n\nUse the `toolkit-npm-publisher.yml` GitHub Actions workflow for automated publishing.\n\n## Contributing\n\nWe welcome contributions! Please follow these steps:\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Submit a pull request\n\n## Support\n\nFor issues, feature requests, or questions, please open an issue in the repository.\n\n## License\n\nThis project is licensed under the Blockscout Software Licence. See the [LICENSE](https://raw.githubusercontent.com/blockscout/frontend/refs/heads/main/LICENSE) file for full terms.","readmeFilename":"README.md","_rev":"1-63b7d3dc487f2aed982652c57e8aaaaf"}