{"_id":"@agiflowai/frontend-web-atoms","name":"@agiflowai/frontend-web-atoms","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@agiflowai/frontend-web-atoms","version":"0.0.0","description":"Web ui components at atomic level","main":"./dist/index.js","jsnext:main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","sideEffects":false,"homepage":"https://github.com/AgiFlow/agiflow-sdks/tree/main/packages/frontend/web-atoms","publishConfig":{"registry":"https://registry.npmjs.org/"},"peerDependencies":{"@agiflowai/frontend-web-theme":">= 0.0.0","@radix-ui/react-dialog":">= 1.0.5","react":">= 17.0.2","react-dom":">= 17.0.2"},"dependencies":{"@radix-ui/react-accordion":"1.1.2","@radix-ui/react-aspect-ratio":"1.0.3","@radix-ui/react-avatar":"1.0.4","@radix-ui/react-checkbox":"1.0.4","@radix-ui/react-collapsible":"1.0.3","@radix-ui/react-dropdown-menu":"2.0.6","@radix-ui/react-hover-card":"1.0.7","@radix-ui/react-label":"2.0.2","@radix-ui/react-navigation-menu":"1.1.4","@radix-ui/react-popover":"1.0.7","@radix-ui/react-radio-group":"1.1.3","@radix-ui/react-scroll-area":"1.0.5","@radix-ui/react-select":"2.0.0","@radix-ui/react-separator":"1.0.3","@radix-ui/react-slider":"1.1.2","@radix-ui/react-slot":"1.0.2","@radix-ui/react-switch":"1.0.3","@radix-ui/react-tabs":"1.0.4","@radix-ui/react-toggle":"1.0.3","@radix-ui/react-toggle-group":"1.0.4","@radix-ui/react-tooltip":"1.0.7","class-variance-authority":"0.7.0","clsx":"2.1.0","colord":"2.9.3","date-fns":"3.6.0","diff":"5.2.0","lucide-react":"0.378.0","next-themes":"0.3.0","ramda":"0.30.0","react-day-picker":"8.10.1","react-resizable-panels":"2.0.19","sonner":"1.5.0","vaul":"0.9.0","@agiflowai/frontend-shared-theme":"0.0.0"},"devDependencies":{"@radix-ui/react-dialog":"1.0.5","@rushstack/eslint-config":"3.7.0","@storybook/react":"6.5.16","@types/node":"20.10.5","@types/ramda":"0.29.9","@types/react":"18.3.1","@types/react-dom":"18.3.0","autoprefixer":"10.4.19","eslint":"8.57.0","eslint-plugin-tailwindcss":"3.15.1","jest":"29.7.0","prettier-plugin-tailwindcss":"0.5.14","react":"18.3.1","rollup":"4.17.2","shadcn-ui":"0.8.0","tailwindcss":"3.4.3","typescript":"5.4.5","webpack":"5.91.0","@agiflowai/rig-eslint-config":"0.0.1","@agiflowai/frontend-web-theme":"0.0.0","@agiflowai/rig-prettier-config":"1.0.1","@agiflowai/rig-rollup-config":"0.0.1","@agiflowai/rig-typescript-config":"0.0.1","@agiflowai/tool-cli":"0.0.1"},"author":{"name":"Vuong Ngo"},"license":"MIT","scripts":{"build":"st build ts package","build:watch":"st build ts package --watch","test":"echo \"Error: no test specified\"","lint":"pnpm run lint:js","lint:js":"eslint --ext .ts --ext .tsx src/","lint:js:fix":"eslint --ext .ts --ext .tsx --quiet --fix src/","fixcode":"pnpm run lint:js:fix","typecheck":"tsc --noEmit"},"_id":"@agiflowai/frontend-web-atoms@0.0.0","_integrity":"sha512-gUSQNolWQTLsCMxhKbt24cwiugC+MXMfc92sYIo19PC/08HbR8kwVkYUxmGb9MEJ/6mPm3PpH/xEi3g0Yn3Z+g==","_resolved":"/private/var/folders/35/_klvbykx3s99bpfh7lcqwrgw0000gn/T/d81c8e8376399e4c571cb22785cfb048/agiflowai-frontend-web-atoms-0.0.0.tgz","_from":"file:agiflowai-frontend-web-atoms-0.0.0.tgz","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-gUSQNolWQTLsCMxhKbt24cwiugC+MXMfc92sYIo19PC/08HbR8kwVkYUxmGb9MEJ/6mPm3PpH/xEi3g0Yn3Z+g==","shasum":"15b8c79a9048ad4c257d3beacfdd1d443f9c7f1b","tarball":"https://registry.npmjs.org/@agiflowai/frontend-web-atoms/-/frontend-web-atoms-0.0.0.tgz","fileCount":264,"unpackedSize":360506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4QAQMdIANz4CutbAsGsnSWuIMfguKWhUs+FC9WrRy2AiEAnUu21QN52eXv4jqlGrExiv5gafYFIu60JaK31jS2ygc="}]},"_npmUser":{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"},"directories":{},"maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/frontend-web-atoms_0.0.0_1720435264433_0.3566341701190019"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-08T10:41:04.338Z","0.0.0":"2024-07-08T10:41:04.702Z","modified":"2024-07-08T10:41:04.946Z"},"maintainers":[{"name":"agiflow-ai","email":"agiflow.ai@gmail.com"}],"description":"Web ui components at atomic level","homepage":"https://github.com/AgiFlow/agiflow-sdks/tree/main/packages/frontend/web-atoms","author":{"name":"Vuong Ngo"},"license":"MIT","readme":"# @agiflowai/frontend-web-atoms\n\nThis package includes [AGIFlow's](https://agiflow.io) atomic React components.\n\n## Features\n\n- **Shadcn/ui ready to use components**\n- **Custom Components**\n\n## Installation\n\nInstall the package using npm or yarn:\n\n```bash\nnpm install @agiflowai/frontend-web-atoms\n```\n\n## Usage\n\n### Shadcn/ui components\nFor **shadcn/ui**'s components, please visit [Shadcn's](https://ui.shadcn.com/docs/components/accordion).\n\n### Custom components\n\n#### Browser\nEmulate Safari browser's look:   \n\n``` tsx\nimport { Browser } from '@agiflowai/frontend-web-atoms';\n\n...\n<Browser>\n  ...\n</Browser>\n```\n\n#### IdPortal\nRender component inside portal by id:   \n\n``` tsx\nimport { IdPortal } from '@agiflowai/frontend-web-atoms';\n\n...\n<IdPortal id={\"<DOM_ID>\"}>\n  ...\n</IdProtal>\n```\n\n#### TextDiff\nRender and show difference between two texts:   \n\n``` tsx\nimport { TextDiff } from '@agiflowai/frontend-web-atoms';\n\n...\n<TextDiff prev={\"...\"} cur={\"...\"} />\n```\n\n#### TimeBar\nRender time progress:   \n\n``` tsx\nimport { TimeBar } from '@agiflowai/frontend-web-atoms';\n\n...\n<TimeBar min={...} max={...} startedAt=\"...\" endedAt=\"...\" />\n```\n\n## License\n\nThis package is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.\n","readmeFilename":"Readme.md"}