{"_id":"@amulya_maggidi/ai-design-system","_rev":"2-78d7742b4bbd872373409f61d86851a3","name":"@amulya_maggidi/ai-design-system","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@amulya_maggidi/ai-design-system","version":"1.0.0","license":"MIT","_id":"@amulya_maggidi/ai-design-system@1.0.0","maintainers":[{"name":"amulya_maggidi","email":"amulyam@divami.com"}],"dist":{"shasum":"0c7654d885d099284f29990f008839537a5f6492","tarball":"https://registry.npmjs.org/@amulya_maggidi/ai-design-system/-/ai-design-system-1.0.0.tgz","fileCount":93,"integrity":"sha512-FVh6/EN9/WNmWkVYacGOlpPbVQghja87n0AkVdr3c9UlXxIukNdIcLyRDT+RHp8zSZoqzNW1J6xaqyq5xpsZJQ==","signatures":[{"sig":"MEUCIDCkUSczWaSvFc3aFyhVVmG8r3Qz3DEDyOK+vsdsUPqlAiEA01lYPbIYO3FyzAiRpYJbqPRusdB3YvKDM0+oICuc3l8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":230852},"type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles":"./dist/ai-design-system.css"},"gitHead":"fd47932d2d89221f702729dd38d6fd27cc53b0ce","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview","build:lib":"vite build --config vite.lib.config.ts","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"amulya_maggidi","email":"amulyam@divami.com"},"_npmVersion":"11.6.0","description":"A React component library of data visualization widgets — charts, sankey diagrams, highlights, and a universal `VisualizationRenderer` — built with Vite and TypeScript.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.8.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.1","react":"^19.2.4","eslint":"^9.39.4","globals":"^17.4.0","react-dom":"^19.2.4","@eslint/js":"^9.39.4","typescript":"~5.9.3","@types/node":"^24.12.0","@types/react":"^19.2.14","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","typescript-eslint":"^8.57.0","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-design-system_1.0.0_1775384792895_0.09657403776822981","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amulya_maggidi/ai-design-system","version":"1.0.1","type":"module","license":"MIT","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles":"./dist/ai-design-system.css"},"sideEffects":["*.css"],"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"vite build --config vite.lib.config.ts","prepublishOnly":"npm run build:lib","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"react":"^19.2.4","react-dom":"^19.2.4","@eslint/js":"^9.39.4","@types/node":"^24.12.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint":"^9.39.4","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.4.0","typescript":"~5.9.3","typescript-eslint":"^8.57.0","vite":"^8.0.1","vite-plugin-dts":"^4.5.4"},"_id":"@amulya_maggidi/ai-design-system@1.0.1","gitHead":"fd47932d2d89221f702729dd38d6fd27cc53b0ce","description":"A React component library of data visualization widgets — charts, sankey diagrams, highlights, and a universal `VisualizationRenderer` — built with Vite and TypeScript.","_nodeVersion":"24.8.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-qYH16QTYZCEndYvh5/jVhvIt02/7fXyDZcHIGVF8QAeHjsgRr5bhVXy7vVhIoQMojfjh+rqnNNy0tcvTLdy1kQ==","shasum":"7fc9bcd9ea15b6d6356ee84f215474f8cf1c7fd2","tarball":"https://registry.npmjs.org/@amulya_maggidi/ai-design-system/-/ai-design-system-1.0.1.tgz","fileCount":93,"unpackedSize":228810,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEd1fmxUZMKt2+oxwieuMLoErFi4Rq6UU/vUKxQ1trylAiB6IA6CjGdC0WhoeK/ROP53vv0dRMAlMvSnXIynEksjQw=="}]},"_npmUser":{"name":"amulya_maggidi","email":"amulyam@divami.com"},"directories":{},"maintainers":[{"name":"amulya_maggidi","email":"amulyam@divami.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-design-system_1.0.1_1775385169472_0.6505106593730623"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-05T10:26:32.772Z","modified":"2026-04-05T10:32:49.720Z","1.0.0":"2026-04-05T10:26:33.040Z","1.0.1":"2026-04-05T10:32:49.616Z"},"license":"MIT","description":"A React component library of data visualization widgets — charts, sankey diagrams, highlights, and a universal `VisualizationRenderer` — built with Vite and TypeScript.","maintainers":[{"name":"amulya_maggidi","email":"amulyam@divami.com"}],"readme":"# @amulya_maggidi/ai-design-system\n\nA React component library of data visualization widgets — charts, sankey diagrams, highlights, and a universal `VisualizationRenderer` — built with Vite and TypeScript.\n\n---\n\n## Installation\n\n```bash\nnpm install @amulya_maggidi/ai-design-system\n```\n\n### Peer dependencies\n\nMake sure your project has these installed:\n\n```bash\nnpm install react react-dom\n```\n\n---\n\n## Setup\n\nImport the stylesheet once in your app entry (e.g. `main.tsx`):\n\n```ts\nimport '@amulya_maggidi/ai-design-system/styles';\n```\n\n---\n\n## Components\n\n### `VisualizationRenderer` — Universal renderer\n\nThe easiest way to render any chart. Pass a typed `config` object and it picks the right component automatically.\n\n```tsx\nimport { VisualizationRenderer } from '@amulya_maggidi/ai-design-system';\n\n// Bar / Line / Area / Pie / Donut\n<VisualizationRenderer config={{ type: 'bar', rows: [{ vendor: 'Alpha', pricing: 120 }] }} />\n<VisualizationRenderer config={{ type: 'line', rows: [{ vendor: 'Q1', pricing: 80 }] }} />\n<VisualizationRenderer config={{ type: 'area', rows: [{ vendor: 'Q1', pricing: 80 }] }} />\n<VisualizationRenderer config={{ type: 'pie',  rows: [{ vendor: 'Alpha', pricing: 40 }] }} />\n<VisualizationRenderer config={{ type: 'donut', rows: [{ vendor: 'Alpha', pricing: 40 }] }} />\n\n// Trend sparkline\n<VisualizationRenderer config={{ type: 'trend', points: [['Jan', 10], ['Feb', 20]] }} />\n\n// Mini bars\n<VisualizationRenderer config={{ type: 'mini-bars', rows: [['Alpha', 80, '#4f8ef7']] }} />\n\n// Sankey (ranked)\n<VisualizationRenderer config={{ type: 'sankey', rows: [{ vendor: 'Alpha', pricing: 120 }] }} />\n\n// Causal flow sankey\n<VisualizationRenderer config={{ type: 'flow', selectedEntity: 'Alpha' }} />\n\n// Optional className for sizing\n<VisualizationRenderer config={{ type: 'bar', rows: [] }} className=\"h-64 w-full\" />\n```\n\n**`config` type reference:**\n\n| `type`              | Required fields                                              |\n| ------------------- | ------------------------------------------------------------ |\n| `line / area / bar / pie / donut / sankey` | `rows: VizRow[]`                     |\n| `trend`             | `points: PointPair[]`                                        |\n| `mini-bars`         | `rows: MiniBarRow[]`                                         |\n| `flow`              | `selectedEntity?: string \\| null`                           |\n| `contract-value-orb` | `data: ContractData`                                        |\n| `contract-bars`     | `contractors: ContractorRow[]`                               |\n| `commitment-race`   | `contractors: ContractorRow[]`                               |\n| `status-arc`        | `segments: EWStatusRow[]; title?: string`                    |\n| `ew-category`       | `categories: EWCategoryRow[]; title?: string`                |\n| `contractor-rank`   | `contractors: EWOpenContractorRow[]; title?: string`         |\n| `severity-bands`    | `severities: EWSeverityRow[]; title?: string`                |\n| `nce-tree`          | `total: number; byContractor: NCEContractorRow[]`            |\n| `compensation-gauge` | `pct: number; confirmed: number; total: number`             |\n| `variation-split`   | `contractors: VariationRow[]`                                |\n| `quotation-balance` | `accepted: QuotationSide; submitted: QuotationSide`          |\n| `quotation-trend`   | `trend: QuotationTrendPoint[]`                               |\n| `weekly-flow`       | `contractors: ContractorRow[]`                               |\n\n---\n\n### `BarChart`\n\n```tsx\nimport { BarChart } from '@amulya_maggidi/ai-design-system';\n\n<BarChart\n  rows={[\n    { vendor: 'Alpha Corp', pricing: 120 },\n    { vendor: 'Beta Ltd',   pricing: 85 },\n  ]}\n  colors={{ bars: ['#4f8ef7', '#a78bfa'], axisLine: '#e5e7eb' }}\n  className=\"h-48\"\n/>\n```\n\n| Prop        | Type              | Description                     |\n| ----------- | ----------------- | ------------------------------- |\n| `rows`      | `VizRow[]`        | Data rows `{ vendor, pricing }` |\n| `colors`    | `BarChartColors`  | Optional color overrides        |\n| `className` | `string`          | CSS class for sizing            |\n\n---\n\n### `LineChart` / `AreaChart`\n\n```tsx\nimport { LineChart, AreaChart } from '@amulya_maggidi/ai-design-system';\n\n<LineChart rows={[{ vendor: 'Jan', pricing: 40 }, { vendor: 'Feb', pricing: 60 }]} />\n<AreaChart rows={[{ vendor: 'Jan', pricing: 40 }, { vendor: 'Feb', pricing: 60 }]} />\n```\n\n| Prop     | Type                 | Description              |\n| -------- | -------------------- | ------------------------ |\n| `rows`   | `VizRow[]`           | Data rows                |\n| `colors` | `SeriesChartColors`  | `line`, `areaFill`, etc. |\n\n---\n\n### `PieChart` / `DonutChart`\n\n```tsx\nimport { PieChart, DonutChart } from '@amulya_maggidi/ai-design-system';\n\n<PieChart   variant=\"pie\"   rows={[{ vendor: 'A', pricing: 60 }, { vendor: 'B', pricing: 40 }]} />\n<DonutChart rows={[{ vendor: 'A', pricing: 60 }, { vendor: 'B', pricing: 40 }]} />\n```\n\n---\n\n### `TrendChart`\n\nSparkline-style trend line.\n\n```tsx\nimport { TrendChart } from '@amulya_maggidi/ai-design-system';\n\n<TrendChart\n  points={[['Week 1', 10], ['Week 2', 18], ['Week 3', 14], ['Week 4', 22]]}\n  colors={{ line: '#4f8ef7', point: '#fff' }}\n/>\n```\n\n---\n\n### `MiniBars`\n\nCompact horizontal bar list.\n\n```tsx\nimport { MiniBars } from '@amulya_maggidi/ai-design-system';\n\n// MiniBarRow = [label, value, color]\n<MiniBars rows={[\n  ['Alpha', 80, '#4f8ef7'],\n  ['Beta',  55, '#a78bfa'],\n]} />\n```\n\n---\n\n### `ProcessSankey` / `RankingSankey` / `SankeySvg`\n\n```tsx\nimport { ProcessSankey, RankingSankey, SankeySvg } from '@amulya_maggidi/ai-design-system';\n\n// Flow sankey driven by an entity selection\n<ProcessSankey selectedEntity=\"Alpha Corp\" />\n\n// Ranked sankey from VizRow data\n<RankingSankey rows={[{ vendor: 'Alpha', pricing: 120 }]} />\n\n// Raw SVG sankey with full node/link control\n<SankeySvg\n  ariaLabel=\"Project cost flow\"\n  nodes={[{ id: 'a', name: 'Alpha' }, { id: 'b', name: 'Beta' }]}\n  links={[{ source: 'a', target: 'b', value: 100 }]}\n  width={600}\n  height={400}\n/>\n```\n\n---\n\n### `SeriesChart`\n\nCombined line/area chart with a `variant` prop.\n\n```tsx\nimport { SeriesChart } from '@amulya_maggidi/ai-design-system';\n\n<SeriesChart variant=\"line\" rows={[{ vendor: 'Jan', pricing: 50 }]} />\n<SeriesChart variant=\"area\" rows={[{ vendor: 'Jan', pricing: 50 }]} />\n```\n\n---\n\n### `KeyHighlights`\n\nRenders a rich highlight block — supports stat chips, badges, dots, flags, comparison tables, and scorecards.\n\n```tsx\nimport { KeyHighlights } from '@amulya_maggidi/ai-design-system';\nimport type { KeyHighlightBlock } from '@amulya_maggidi/ai-design-system';\n\nconst block: KeyHighlightBlock = {\n  type: 'stat',\n  title: 'Total Contracts',\n  value: '142',\n  chips: [\n    { value: '+12', label: 'this month', color: 'green' },\n  ],\n};\n\n<KeyHighlights block={block} />\n```\n\n---\n\n### `ChartFrame`\n\nA simple wrapper that provides consistent padding/sizing for any custom chart content.\n\n```tsx\nimport { ChartFrame } from '@amulya_maggidi/ai-design-system';\n\n<ChartFrame className=\"h-64\">\n  <p>Custom content</p>\n</ChartFrame>\n```\n\n---\n\n## Utility Functions\n\n### `hydrateVisualizationMounts`\n\nRenders `VisualizationRenderer` into all DOM elements that have a `data-visualization` attribute — useful for server-rendered or CMS pages.\n\n```ts\nimport { hydrateVisualizationMounts } from '@amulya_maggidi/ai-design-system';\n\n// Call after the DOM is ready\nhydrateVisualizationMounts();\n```\n\nAdd to your HTML:\n\n```html\n<div data-visualization='{\"type\":\"bar\",\"rows\":[{\"vendor\":\"Alpha\",\"pricing\":100}]}'></div>\n```\n\n### `serializeVisualizationConfig`\n\nSafely serializes a config object into a `data-visualization` attribute string.\n\n```ts\nimport { serializeVisualizationConfig } from '@amulya_maggidi/ai-design-system';\n\nconst attr = serializeVisualizationConfig({ type: 'bar', rows: [] });\n// → '{\"type\":\"bar\",\"rows\":[]}'\n```\n\n### `cleanupVisualizationMounts`\n\nUnmounts all hydrated visualization roots. Call before navigating away or on component unmount.\n\n```ts\nimport { cleanupVisualizationMounts } from '@amulya_maggidi/ai-design-system';\n\ncleanupVisualizationMounts();\n```\n\n---\n\n## Type Exports\n\nAll shared types are re-exported for use in consuming projects:\n\n```ts\nimport type {\n  BaseVisualizationConfig,\n  VizRow,\n  PointPair,\n  MiniBarRow,\n  SankeyNodeData,\n  SankeyLinkData,\n  KeyHighlightBlock,\n} from '@amulya_maggidi/ai-design-system';\n```\n\n---\n\n## Building the library\n\n```bash\nnpm run build:lib   # outputs to dist/\nnpm pack            # creates .tgz for distribution\n```\n\n---\n\n## License\n\nMIT © Divami Design Labs\n\n\n","readmeFilename":"README.md"}