{"_id":"@capitol.ai/ui-components","_rev":"2-43147ecca0deb410e8adb6969b312dc3","name":"@capitol.ai/ui-components","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@capitol.ai/ui-components","version":"0.0.1","keywords":["react","components","tailwind","library","capitolai","deep search","ai tools"],"license":"Proprietary","_id":"@capitol.ai/ui-components@0.0.1","maintainers":[{"name":"miguel.capitolai","email":"miguel@capitol.ai"},{"name":"tuanhtle97","email":"tuanhtle97@gmail.com"},{"name":"capitolai-ilia","email":"ilia@capitol.ai"},{"name":"masha.capitolai","email":"masha@capitol.ai"}],"dist":{"shasum":"351629923494e2fd66967d6a4b77c8aadcccea8d","tarball":"https://registry.npmjs.org/@capitol.ai/ui-components/-/ui-components-0.0.1.tgz","fileCount":7,"integrity":"sha512-TAt3UoRbFpYtnSCEfV6C683v7/3picciXn2We36NCYpPjNGzGm8uBNPmBmviVBOEY3FnnfpFAeTHnu+yrafM5w==","signatures":[{"sig":"MEUCIQCSpdOkftBBEuKz9lPofAqngBfd//abB/StmUwEjf0lmgIgSmfpgYAyjLF/OIqylByQHlz/pE8ARijy76rVQL1f+M4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":776371},"main":"dist/capitolai-ui-components.umd.js","type":"module","style":"dist/ui-components.css","module":"dist/capitolai-ui-components.js","gitHead":"05625505c826d55cd00850f43768342761cfd8c6","scripts":{"dev":"vite","lint":"eslint .","size":"npm run build && gzip-size dist/capitolai-ui-components.umd.js dist/capitolai-ui-components.js dist/ui-components.css","test":"vitest","build":"vite build","format":"prettier --write src/**/*.{js,jsx,json,css}","analyze":"vite build --mode analyze","prepare":"husky install","preview":"vite preview","release":"npm run build && npm version patch && npm publish","test:ui":"vitest --ui","test:watch":"vitest watch","vercel-build":"npm run build:website","build:website":"vite build --config vite.config.website.js","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"capitolai-ilia","email":"ilia@capitol.ai"},"_npmVersion":"10.7.0","description":"Library of React components from Capitol AI","directories":{},"lint-staged":{"src/**/*.{js,jsx,json,css}":["prettier --write"]},"_nodeVersion":"18.20.4","dependencies":{"lottie-web":"^5.12.2","@faker-js/faker":"^9.7.0","markdown-to-jsx":"^7.7.6","react-router-dom":"^7.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","vite":"^6.3.0","husky":"^9.1.7","jsdom":"^26.1.0","eslint":"^9.21.0","vitest":"^3.1.1","globals":"^15.15.0","postcss":"^8.4.35","prettier":"^3.5.3","@eslint/js":"^9.21.0","@vitest/ui":"^3.1.1","babel-jest":"^29.7.0","@babel/core":"^7.24.0","lint-staged":"^15.5.1","tailwindcss":"^3.4.1","@types/react":"^18.2.0","autoprefixer":"^10.4.21","gzip-size-cli":"^5.1.0","@types/react-dom":"^18.2.0","@babel/preset-env":"^7.24.0","identity-obj-proxy":"^3.0.0","@babel/preset-react":"^7.23.3","@vitest/coverage-v8":"^3.1.1","@vitejs/plugin-react":"^4.3.4","@testing-library/react":"^14.3.1","jest-environment-jsdom":"^29.7.0","@tailwindcss/line-clamp":"^0.4.4","@tailwindcss/typography":"^0.5.16","rollup-plugin-visualizer":"^5.12.0","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2","eslint-plugin-react-refresh":"^0.4.19","prettier-plugin-tailwindcss":"^0.6.11"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_0.0.1_1747179645418_0.38552918656002566","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-13T23:40:45.339Z","modified":"2026-02-10T20:50:56.839Z","0.0.1":"2025-05-13T23:40:45.675Z"},"license":"Proprietary","keywords":["react","components","tailwind","library","capitolai","deep search","ai tools"],"description":"Library of React components from Capitol AI","maintainers":[{"email":"miguel@capitol.ai","name":"miguel.capitolai"},{"email":"tuanhtle97@gmail.com","name":"tuanhtle97"},{"email":"masha@capitol.ai","name":"masha.capitolai"}],"readme":"# Capitol AI - Summary\n\n## Local setup\n\nFirst, install the package:\n\n```\nnpm install @capitol.ai/summary\n```\n\nThen, import components you need and default styles (optional):\n```\nimport { Summary } from '@capitol.ai/summary';\nimport '@capitol.ai/summary/dist/summary.css';\n```\n\n## Components\n\n### Summary\n\nThe main component that displays AI-generated summaries in different layouts.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| summaryId | string | \"\" | Unique identifier for the summary |\n| prompt | string | \"prompt\" | The prompt text that generated the summary |\n| title | string | \"AI summary\" | Title of the summary |\n| className | string | \"\" | Additional CSS classes |\n| summary | string | \"\" | The summary content |\n| layout | \"quoted\" \\| \"clean\" | \"quoted\" | Layout type for the summary. \"quoted\" shows prompt in quotes with decorative elements, \"clean\" provides a minimal design |\n| format | \"basic\" \\| \"advanced\" | \"basic\" | Format type for the summary |\n| output | SummaryOutput | undefined | Additional output data for advanced format |\n| useMarkdown | boolean | false | Whether to render the summary content as markdown. When true, the content will be rendered using ReactMarkdown with proper styling |\n\n### Prompt\n\nA component for user input with customizable styling.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| placeholderText | string | \"Enter prompt\" | Placeholder text for the input |\n| minHeight | number | undefined | Minimum height of the input area |\n| accentColor | string | undefined | Accent color for the submit button |\n| onSubmit | (prompt: string) => void | () => {} | Callback when prompt is submitted |\n| onChange | (text: string) => void | () => {} | Callback when prompt text changes |\n| disabled | boolean | false | Whether the input is disabled |\n\n### PromptSuggestions\n\nDisplays a list of prompt suggestions that users can click on.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| prompts | string[] | [] | Array of prompt suggestions |\n| onClickHandler | (prompt: string) => void | () => {} | Callback when a suggestion is clicked |\n| title | string | \"Suggestions\" | Title of the suggestions section |\n\n### PromptWithOptions\n\nCombines the Prompt component with suggestion options.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| placeholder | string | \"Ask a question\" | Placeholder text for the input |\n| prompts | string[] | [] | Array of prompt suggestions |\n| onSubmit | (prompt: string) => void | undefined | Callback when prompt is submitted |\n| onChange | (text: string) => void | undefined | Callback when prompt text changes |\n\n### Sources\n\nDisplays a list of sources with optional masonry layout and pagination.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| sources | Source[] | [] | Array of source objects |\n| isMasonryLayout | boolean | false | Whether to use masonry layout |\n| itemsPerPage | number | 4 | Number of items to display per page |\n\n### Pagination\n\nA reusable pagination component for navigating through pages of content. Mainly used as pagination for Sources\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| currentPage | number | 1 | Current page number |\n| totalPages | number | 1 | Total number of pages |\n| onPageChange | (page: number) => void | () => {} | Callback when page changes |\n| maxVisiblePages | number | 5 | Maximum number of visible page buttons |\n\n### Navigation\n\nDisplays a navigation menu with active state tracking.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| title | string | \"Navigation\" | Title of the navigation section |\n| navList | NavItem[] | [] | Array of navigation items |\n| activeItem | string | \"\" | Currently active navigation item |\n\n### GenerationLog\n\nDisplays a list of generation steps with loading animations.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| title | string | \"Generating...\" | Title of the generation log |\n| logs | string[] | [] | Array of log messages |\n\n## Types\n\n### SummaryOutput\n\n| Property | Type | Description |\n|----------|------|-------------|\n| header | string | Header text for the summary |\n| body | string | Main body content of the summary |\n| image | string | Optional image URL for the summary |\n\n### Source\n\n| Property | Type | Description |\n|----------|------|-------------|\n| url | string | URL of the source |\n| title | string | Title of the source |\n| image | string | Image URL for the source |\n\n### NavItem\n\n| Property | Type | Description |\n|----------|------|-------------|\n| ref | string | Reference ID for the navigation item |\n| name | string | Display name of the navigation item |\n\n## Example Usage\n\n```jsx\nimport { Summary, PromptWithOptions, Sources, Navigation, GenerationLog } from '@capitol.ai/summary';\nimport '@capitol.ai/summary/dist/summary.css';\n\nconst MyApp = () => {\n  return (\n    <div>\n      <PromptWithOptions\n        placeholder=\"Ask a question\"\n        prompts={[\"What is AI?\", \"How does it work?\"]}\n        onSubmit={(prompt) => console.log(prompt)}\n      />\n      <GenerationLog\n        title=\"Generating Summary\"\n        logs={[\"Analyzing sources\", \"Generating content\"]}\n      />\n      <Summary\n        title=\"AI Summary\"\n        prompt=\"What is artificial intelligence?\"\n        summary=\"Artificial intelligence is...\"\n        layout=\"metric-media\"\n      />\n      <Sources\n        sources={[\n          {\n            url: \"https://example.com\",\n            title: \"Example Source\",\n            image: \"https://example.com/image.jpg\"\n          }\n        ]}\n      />\n      <Navigation\n        title=\"Table of Contents\"\n        navList={[\n          { ref: \"section1\", name: \"Introduction\" },\n          { ref: \"section2\", name: \"Main Content\" }\n        ]}\n        activeItem=\"section1\"\n      />\n    </div>\n  );\n}\n```\n\n## Building new package\n\nIt's always a better idea to test before publish (e.g. using App.jsx).\n\nOnce you absolutely happy with what you've done:\n\n```\nnpm run build\nnpm version patch\nnpm publish\n```\n","readmeFilename":"README.md"}