{"_id":"@cognite/cogs.js-v2","_rev":"3-e0e0c0be40bb40e0cee773fe37ed0201","name":"@cognite/cogs.js-v2","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@cognite/cogs.js-v2","version":"0.0.1","keywords":["react","typescript","tailwindcss","design-system","components","cognite","ai-friendly"],"author":{"name":"Cognite"},"license":"MIT","_id":"@cognite/cogs.js-v2@0.0.1","maintainers":[{"name":"voron86","email":"vor_cv@rambler.ru"},{"name":"oiuytrdsxcvbnjkhgfcvbnm","email":"nicholas.gerstle@cognite.com"},{"name":"kondanta","email":"doganntaylan@gmail.com"},{"name":"sumitpandey","email":"i.sumitpandey@gmail.com"},{"name":"francisco.rull","email":"francisco.rull@cognite.com"},{"name":"frxstrem","email":"frx.apps@gmail.com"},{"name":"cognitecicd","email":"cicd@cognite.com"},{"name":"dmakked","email":"dinesh.makked@pinnaclereliability.com"},{"name":"arnels","email":"arnelsund@gmail.com"},{"name":"sondre.solbakken","email":"sondre.solbakken@cognite.com"},{"name":"sigridschaanning","email":"sigrid.schaanning@cognite.com"},{"name":"thorkild","email":"thorkild.stray@cognite.com"},{"name":"ankku","email":"ankit.kumar@cognite.com"},{"name":"dewmihimanshi","email":"dewmi.dissanayake@cognite.com"},{"name":"kinga.cognite","email":"erzsebet-kinga.sala@cognite.com"},{"name":"nabati","email":"poyan.nabati@gmail.com"},{"name":"toonday","email":"tunde1990@gmail.com"},{"name":"erikangelsen-cognite","email":"erik.angelsen@cognite.com"},{"name":"cemreyavuz","email":"cuneyt.yavuz@cognite.com"},{"name":"bdemirel","email":"bdemirel732@gmail.com"},{"name":"anjalirai2626","email":"n8anjalirai@gmail.com"},{"name":"cmcneece","email":"colin.mcneece@cognite.com"},{"name":"sennen-cognite","email":"sennen.almeida@cognite.com"},{"name":"dilshan-cognite","email":"dilshan.weeraratne@cognite.com"},{"name":"davidhwu","email":"david.wu@cognite.com"},{"name":"neringaalt","email":"neringa.altanaite@cognite.com"},{"name":"dagcmossige-cognite","email":"dag.mossige@cognite.com"},{"name":"parami.abeysekara","email":"parami.abeysekara@cognite.com"},{"name":"birkmose","email":"michael.birkmose@gmail.com"},{"name":"mariusud-cog","email":"marius.udnaes@cognite.com"},{"name":"tugceozgur","email":"tugce.oztetik@cognite.com"},{"name":"pavelzubarev","email":"pavel.zubarev@cognite.com"},{"name":"msusag","email":"michael.susag@cognite.com"},{"name":"nfremming","email":"nils.fremming@cognite.com"},{"name":"brgverst","email":"bert.verstraete@cognite.com"},{"name":"pramodcog","email":"pramod.s@cognitedata.com"},{"name":"savokr","email":"savelii.novikov@cognite.com"},{"name":"filipjohnsen","email":"filipjohnsen97@gmail.com"},{"name":"steinhdan","email":"shd@cameon.net"},{"name":"dmivankov","email":"dmitry.ivankov@cognite.com"},{"name":"polomani","email":"ivano.polomani@gmail.com"},{"name":"nils-cognite","email":"nils.barlaug@cognite.com"},{"name":"dlcognite","email":"david.liu@cognite.com"},{"name":"carlospereira","email":"carlos.l.pereira@gmail.com"},{"name":"larsmoa","email":"lars.moastuen@cognite.com"},{"name":"nishafern","email":"nisha.fernando@cognite.com"},{"name":"trygve.utstumo","email":"trygve.utstumo@cognite.com"},{"name":"kathrine-cognite","email":"kathrine.muszynski@cognite.com"},{"name":"ahmedcognite","email":"ahmed.noor@cognite.com"},{"name":"rekarnar","email":"rekarnar@gmail.com"},{"name":"maximcognite","email":"maxim.yatsenko@cognite.com"},{"name":"hhenriques","email":"henrique.henriques@cognite.com"},{"name":"tfheen-cognite","email":"tollef.fog.heen@cognite.com"},{"name":"oksana_korniienko","email":"oksana.korniienko@cognite.com"},{"name":"j-bjorne","email":"joachim.bjorne@cognite.com"},{"name":"scottmelhop","email":"scott.melhop@cognite.com"},{"name":"mathialo","email":"mathias.lohne@cognite.com"},{"name":"paulo-menezes-cognite","email":"paulo.menezes@cognite.com"},{"name":"mlkrsrc","email":"mlkrsrc@gmail.com"},{"name":"miladcognite","email":"milad.mobarhan@cognite.com"},{"name":"me-ydv-5","email":"sahil.yadav@cognite.com"},{"name":"cogniteterraform","email":"cicd+terraform@cognite.com"},{"name":"anderscognite","email":"anders.hafreager@cognite.com"},{"name":"fredrik955","email":"fredrik.anfinsen@gmail.com"},{"name":"halvard","email":"halvard.eggen@cognite.com"},{"name":"dan.levings.cognite","email":"dan.levings@cognite.com"},{"name":"christjt","email":"christopher.tannum@cognite.com"},{"name":"arnekv","email":"arne.kvadsheim@cognite.com"},{"name":"ana-gheorghe","email":"ana.gheorghe@cognite.com"},{"name":"pbettler","email":"philippe.bettler@cognite.com"},{"name":"qtiptip","email":"ivar.stangeby@cognite.com"},{"name":"sceniclife","email":"viet.le@cognite.com"},{"name":"johan-cognite","email":"johan.hatleskog@cognite.com"},{"name":"theresatalor-cognite","email":"theresa.talor@cognite.com"},{"name":"anders-cog","email":"anders.morken@cognite.com"},{"name":"skairunner","email":"skye.im@nyu.edu"},{"name":"jtcog","email":"janne.trollebo@cognite.com"},{"name":"deep-cognite","email":"deep.singh@cognite.com"},{"name":"mattmurph9","email":"murphy.matt@live.ca"},{"name":"lprovensi","email":"lucas.provensi@cognite.com"},{"name":"haakonflatval-cognite","email":"hakon.flatval@cognite.com"},{"name":"sighol","email":"sighol@gmail.com"},{"name":"heiding","email":"henrik.eiding@cognite.com"},{"name":"daniel.priori","email":"daniel.priori@cognite.com"},{"name":"olalia","email":"ola.liabotro@cognite.com"},{"name":"trodden-dev","email":"Torgeir.ruden@cognite.com"},{"name":"bdimitrijoski","email":"brankodimitrioski@gmail.com"},{"name":"madskjeldsberg","email":"mads.kjeldsberg@cognite.com"},{"name":"farrukk24","email":"farrukk24@gmail.com"},{"name":"bianca-mv","email":"bianca.voinea@cognite.com"},{"name":"malindakpt","email":"malindakpt@gmail.com"},{"name":"mihilr","email":"mihilranathunga@gmail.com"},{"name":"gayandeegala","email":"gayanDeegala@gmail.com"},{"name":"tfarvac","email":"thomas.farvacque@cognite.com"},{"name":"borajimin","email":"borajimin@gmail.com"},{"name":"samir-ajdarpasic","email":"samir.ajdarpasic@cognite.com"},{"name":"chanaka25","email":"chanaka.pradeep@conite.com"},{"name":"geircognite","email":"geir.engdahl@cognite.com"},{"name":"vebjorngilberg","email":"vebjorn.gilberg@cognite.com"},{"name":"roligheten","email":"christian@roligheten.no"},{"name":"marcushorn","email":"marcus.horn@cognite.com"},{"name":"atussa","email":"atussa.koushan@cognite.com"},{"name":"aizumi","email":"atsushi.izumi@cognite.com"},{"name":"therockvalley","email":"orjan.steindal@gmail.com"},{"name":"dmitrijs.rutko.cognite","email":"dmitrijs.rutko@cognite.com"},{"name":"perarnet","email":"per.tollefsen@cognite.com"},{"name":"bisera","email":"bisera.milosheska@cognite.com"},{"name":"sazdovamoni","email":"sazdovamoni@gmail.com"},{"name":"shehan.cognite","email":"shehan.fonseka@cognite.com"},{"name":"udara-cognite","email":"udara.sembukuttiarachchi@cognite.com"},{"name":"keepfloyding","email":"andris.piebalgs@cognite.com"},{"name":"sugala","email":"sugala.rajapaksha@cognite.com"},{"name":"tommy_thorsen","email":"tommy.thorsen@cognite.com"},{"name":"andersfylling","email":"anders@nordic.email"},{"name":"meisammalekzadeh","email":"meisammalekzadeh@gmail.com"},{"name":"ericbrattli","email":"eric.brattli@cognite.com"},{"name":"mcarun","email":"arun.arunachalam@cognite.com"},{"name":"saagar-cognite","email":"saagar.takhi@cognite.com"},{"name":"waqasjaved1","email":"waqas.javed@cognite.com"},{"name":"eriklien","email":"erik.johnsen@cognite.com"},{"name":"23andreas","email":"andreas.skonberg@gmail.com"},{"name":"ikechukwu","email":"iykekings36@gmail.com"},{"name":"sagarthalwar","email":"sagarthalaar@gmail.com"},{"name":"manoj-cognite","email":"manoj.jayasinghe@cognite.com"},{"name":"lpereiracgn","email":"luis.pereira@cognite.com"},{"name":"marvin.reza","email":"marvin.reza@cognite.com"},{"name":"kbrattli","email":"kbrattli@live.no"},{"name":"sowmya.rajan","email":"sowmya.rajan@cognite.com"},{"name":"luka-mikec-cognite","email":"luka.mikec@cognite.com"},{"name":"greenbech-cognite","email":"henrik.gronbech@cognite.com"},{"name":"bhavith","email":"bhavith.vijayan@cognite.com"},{"name":"kornelione","email":"andreas.korneliussen@gmail.com"},{"name":"julia.scott","email":"julia.scott@cognite.com"},{"name":"chyrus","email":"chyrus.ramesh@cognite.com"},{"name":"fran.hrzenjak","email":"fran.hrzenjak@cognite.com"},{"name":"sig1991","email":"sigurd.hylin@cognite.com"},{"name":"ddowntain-cognite","email":"darren.downtain@cognite.com"},{"name":"ponnapz","email":"sharat.attuppurath@cognite.com"},{"name":"abdullah-cognite","email":"abdullah.ali@cognite.com"},{"name":"peet.cremer","email":"peet.cremer@cognite.com"},{"name":"erlendvollset","email":"erlendvollset@gmail.com"},{"name":"npmwatchtower","email":"npm-watchtower@cognite.com"},{"name":"torgrim","email":"torgrimaas@gmail.com"},{"name":"sou1est","email":"baielrysbekov@gmail.com"},{"name":"einar.omang","email":"einar.omang@cognite.com"},{"name":"eirik.djuve","email":"eirik.djuve@cognite.com"},{"name":"dafn","email":"dafn@outlook.com"},{"name":"shashan_udawatte","email":"shashan.udawatte@cognite.com"},{"name":"silvavelosa","email":"jaime.silva@cognite.com"},{"name":"pedro.lindeza","email":"pedro.lindeza@cognite.com"},{"name":"mhmdfy","email":"mhmdfy@gmail.com"},{"name":"francois_poinsot","email":"gest.francois.poinsot@gmail.com"},{"name":"maksym.kowalski","email":"maksym.kowalski@cognite.com"},{"name":"stefanmaretic","email":"stefan.maretic@gmail.com"},{"name":"shubhski","email":"shubham88singh@gmail.com"},{"name":"edelhvesser","email":"edel.andersen@cognite.com"},{"name":"mortgron","email":"morten.gronbech@cognite.com"},{"name":"ihauger","email":"lise.hauger@cognite.com"},{"name":"joelnicolaysen-cognite","email":"joel.nicolaysen@cognite.com"},{"name":"tharushirathnayake","email":"tharushi.rathnayake@cognite.com"},{"name":"morten.mjelva","email":"morten.mjelva@gmail.com"},{"name":"cecilieuppard","email":"cecilie.uppard@cognite.com"},{"name":"alireza-cog","email":"alireza.kandeh@cognite.com"},{"name":"vdb93","email":"viraj.dhanusha@cognite.com"},{"name":"gertjan.vermeir","email":"gertjan.vermeir@gmail.com"},{"name":"bkuzma","email":"bkuzma@gmail.com"},{"name":"duminducognite","email":"dumindu.desilva@cognite.com"},{"name":"ben.petree","email":"ben.petree@cognite.com"},{"name":"maneshka.cognite","email":"maneshka.paiva@cognite.com"},{"name":"vincent-cognite","email":"vincent.gay@cognite.com"},{"name":"mithilacognite","email":"mithila.jayalath@cognitedata.com"},{"name":"dilinifernando","email":"dilini.fernando@cognite.com"},{"name":"judeezzz","email":"jude.fernando@cognite.com"},{"name":"dilesha08","email":"dilesha.kodithuwakku@cognite.com"},{"name":"tokongs","email":"tokongs98@gmail.com"},{"name":"kanchana.premachandra","email":"kanchana.premachandra@cognite.com"},{"name":"peter.gasper","email":"peter.gasper@cognite.com"},{"name":"hargunmujral","email":"hargunmujral@gmail.com"},{"name":"anette-cognite","email":"anette.jacobsen@cognite.com"},{"name":"evertoncolling","email":"everton.colling@cognite.com"},{"name":"cyriaquebrousse","email":"cyriaque.brousse@cognite.com"},{"name":"g0nza1es","email":"gokhan.karasoglu@cognite.com"},{"name":"psalaberria002","email":"psalaberria002@gmail.com"},{"name":"redzarosli","email":"redza.rosli@cognite.com"},{"name":"nimesha.wij","email":"nimesha.wijewardana@cognite.com"},{"name":"katrilh-npm-cognite","email":"katrine.holm@cognite.com"},{"name":"tuanng-cognite","email":"tuan.nguyen@cognite.com"},{"name":"jorglund","email":"jorglund@outlook.com"},{"name":"padalby","email":"peder.dalby@cognite.com"},{"name":"chrfla-cognite","email":"christian.flasshoff@cognite.com"},{"name":"darshana.herath","email":"darshana.herath@cognite.com"},{"name":"notrixbe","email":"wim@notrix.be"},{"name":"viktoryia_halukhina","email":"viktoryia.halukhina@cognite.com"},{"name":"que.tran.cognite","email":"que.tran@cognite.com"},{"name":"visri","email":"vibha.srinivasan@cognite.com"},{"name":"ronpal","email":"pal.ronning@cognite.com"},{"name":"uda1998","email":"udantha.wijeweera@cognite.com"},{"name":"aasmundeldhuset","email":"aasmund.eldhuset@cognite.com"},{"name":"pawara101","email":"pawara.dassanayake@cognite.com"},{"name":"arunprashath","email":"arun.shanmuganathan@cognite.com"},{"name":"vivek99","email":"vivek.subendran@cognite.com"},{"name":"pasindu745","email":"pasindu.perera@cognite.com"},{"name":"sjolshag","email":"thomas.sjolshagen@cognite.com"},{"name":"takuya-y","email":"takuya-y@parars.net"},{"name":"gregoryfagan","email":"gregory.fagan@cognite.com"},{"name":"rogersoroy","email":"roger.soroy@cognite.com"},{"name":"elias.bjorne","email":"elias.bjorne+new@cognite.com"},{"name":"nakatsuka.hiroyuki","email":"nakatsuka.hiroyuki@cognite.com"},{"name":"isaconantonis","email":"sam.antonis@isacon.be"},{"name":"muradsater","email":"murad.sater@cognite.com"},{"name":"haukb","email":"haukbjo@gmail.com"},{"name":"vishal-cognite","email":"vishal.doshi@cognite.com"},{"name":"andreolefirenko","email":"andre.olefirenko@cognite.com"},{"name":"arildecog","email":"arild.eide@cognite.com"},{"name":"sasiruh_cognite","email":"sasiru.hapuarachchi@cognite.com"},{"name":"islakcog","email":"isuru.munasinghe@cognite.com"},{"name":"sachcog","email":"sachin.perera@cognite.com"},{"name":"tharmeekannpm","email":"tharmeekan.sivarasan@cognite.com"},{"name":"sabina.dinu","email":"sabina.dinu@cognite.com"},{"name":"kat-cognite","email":"kathrine.muszynski@cognitedata.com"},{"name":"cimstordal","email":"cim.stordal@cognite.com"},{"name":"yukihide_sakihama","email":"yukihide.sakihama@cognite.com"},{"name":"kelvinai","email":"kelvin.sundli@gmail.com"},{"name":"dbrattli","email":"dag@brattli.net"},{"name":"ana-gheorghe-3","email":"ana.gheorghe@cognitedata.com"},{"name":"tharindu_cognite","email":"tharindu.ilangakoon@cognite.com"},{"name":"akhramov_cognite","email":"artem.khramov@cognite.com"},{"name":"johan.dahl","email":"johan.dahl@cognite.com"},{"name":"dd5ht","email":"npm@dd5ht.de"},{"name":"tenomoto","email":"takashi.enomoto@cognite.com"},{"name":"niek.beckers","email":"niek.beckers@cognite.com"},{"name":"sudilhasithacognite","email":"sudil.abeyagunasekera@cognite.com"},{"name":"jacob-eliat-eliat-cognite","email":"jacob.eliat-eliat@cognite.com"},{"name":"permfl","email":"per.florvaag@cognite.com"},{"name":"andreas_cognite","email":"andreas.solbra@cognite.com"},{"name":"eiriklv","email":"eirik@evconsult.no"},{"name":"parars-saitoh","email":"kazuki-s@parars.net"},{"name":"akeelishak","email":"akeel.ishak@cognite.com"},{"name":"shimizu-tomoaki","email":"tomoaki-s@parars.net"},{"name":"rcl-cognite","email":"robert.lombardo@cognite.com"},{"name":"hasitham97","email":"hasitha.malinga@cognite.com"},{"name":"joyceshi","email":"xjoyceshi@gmail.com"},{"name":"ryuyan","email":"ryutaro.yano@cognite.com"},{"name":"randula","email":"doshani.vidanapathirana@cognite.com"},{"name":"ipetin","email":"ilja.petin@cognite.com"},{"name":"wataru.okamoto","email":"wataru.okamoto@cognite.com"},{"name":"goto.satoru","email":"satoru.goto@cognite.com"},{"name":"gregerw","email":"greger.wedel@cognite.com"},{"name":"mr.celo","email":"marcelowind@gmail.com"},{"name":"chanaka.pradeep","email":"chanaka.pradeep@cognite.com"},{"name":"kbotond01","email":"kovacs.botond@accenture.com"},{"name":"geza-pocs-acc","email":"geza.pocs@cognite.com"},{"name":"spinoble","email":"zsolt.kiss@accenture.com"},{"name":"kristiangv","email":"kristian.vangsnes@cognite.com"},{"name":"dimitry-cognite","email":"dimitry.hoff@cognite.com"},{"name":"xhzhao","email":"xha.zhao@gmail.com"},{"name":"anders-hopland-cognite","email":"anders.hopland@cognite.com"},{"name":"shanthoshp","email":"shanthosh.pushparajah@cognite.com"},{"name":"parars-esaki","email":"sumire-e@parars.net"},{"name":"shotin","email":"ifbb324@gmail.com"},{"name":"manuel-ruibal","email":"manuel.ruibal@cognite.com"}],"dist":{"shasum":"a109b7d80cbdafecfb7e119a27c0cfb90df51386","tarball":"https://registry.npmjs.org/@cognite/cogs.js-v2/-/cogs.js-v2-0.0.1.tgz","fileCount":35,"integrity":"sha512-BwwhFQGbkrgFJwooGx5yeS2KeLov3QXvqX28JG630YNf+VnZ7NfRKIVikg8KisaRG2TGeKOzLUl99dbB2vpUAw==","signatures":[{"sig":"MEQCIEFVcOW7/FyIy3N4nXzMmp7fQGl/sw5gISQYPnGsdRlDAiBv7PMhJ92P5wTWyYihpWAesGglFNhK9EaOGS/9gGNndw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":205927},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles":"./dist/styles.css","./ai-guide":"./dist/AI_USAGE_GUIDE.md"},"scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"npm run build:lib && npm run build:types","preview":"vite preview","build:lib":"vite build --config vite.lib.config.ts","storybook":"storybook dev -p 6006","type-check":"tsc --noEmit","build:types":"tsc --project tsconfig.build.json","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"dan.levings.cognite","email":"dan.levings@cognite.com"},"_npmVersion":"10.8.2","description":"A comprehensive React component library for AI-generated applications with Cognite branding","directories":{},"_nodeVersion":"20.19.4","dependencies":{"clsx":"^2.0.0","react":">=16.8.0","react-dom":">=16.8.0","tailwind-merge":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.8","eslint":"^8.55.0","postcss":"^8.4.32","storybook":"^8.4.7","typescript":"^5.2.2","tailwindcss":"^3.3.6","@types/react":"^18.2.43","autoprefixer":"^10.4.16","@storybook/react":"^8.4.7","@types/react-dom":"^18.2.17","@storybook/blocks":"^8.4.7","tailwindcss-animate":"^1.0.7","@vitejs/plugin-react":"^4.2.1","@storybook/addon-docs":"^8.4.7","@storybook/react-vite":"^8.4.7","@storybook/addon-links":"^8.4.7","@storybook/addon-mdx-gfm":"^8.6.14","@storybook/addon-controls":"^8.4.7","@storybook/addon-viewport":"^8.4.7","@typescript-eslint/parser":"^6.14.0","eslint-plugin-react-hooks":"^4.6.0","@storybook/testing-library":"^0.2.2","@storybook/addon-essentials":"^8.4.7","@storybook/addon-onboarding":"^8.4.7","eslint-plugin-react-refresh":"^0.4.5","@storybook/addon-backgrounds":"^8.4.7","@storybook/addon-interactions":"^8.4.7","@typescript-eslint/eslint-plugin":"^6.14.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/cogs.js-v2_0.0.1_1756551135172_0.67644165936827","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-08-30T10:52:15.086Z","modified":"2026-05-28T14:31:17.183Z","0.0.1":"2025-08-30T10:52:15.390Z"},"author":{"name":"Cognite"},"license":"MIT","keywords":["react","typescript","tailwindcss","design-system","components","cognite","ai-friendly"],"description":"A comprehensive React component library for AI-generated applications with Cognite branding","maintainers":[{"email":"cicd@cognite.com","name":"cognitecicd"}],"readme":"# Cognite Design System\n\nA comprehensive React component library built with TypeScript and Tailwind CSS, designed specifically for AI-generated applications that maintain consistent Cognite branding.\n\n## 🎯 Purpose\n\nThis design system enables AI to easily generate applications with consistent look and feel based on Cognite branding. It provides a complete set of pre-built components that can be used to rapidly create professional applications.\n\n## 📦 Installation\n\n```bash\nnpm install @cognite/design-system\n```\n\n### Peer Dependencies\n\nMake sure you have the required peer dependencies installed:\n\n```bash\nnpm install react react-dom\n```\n\n### Setup Tailwind CSS\n\nThis design system requires Tailwind CSS to be configured in your project. Add the design system's styles to your Tailwind configuration:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    // ... your existing content paths\n    \"./node_modules/@cognite/design-system/dist/**/*.{js,ts,jsx,tsx}\",\n  ],\n  // ... rest of your config\n}\n```\n\nImport the styles in your main CSS file:\n\n```css\n@import '@cognite/design-system/styles';\n```\n\n## 🚀 Quick Start\n\n```tsx\nimport { Button, Card, Input } from '@cognite/cogs.js-v2';\n\nfunction App() {\n  return (\n    <Card>\n      <Input label=\"Email\" type=\"email\" />\n      <Button variant=\"primary\">Submit</Button>\n    </Card>\n  );\n}\n```\n\n## 🤖 AI Usage Guide\n\nThis package includes a comprehensive AI usage guide to help AI systems generate consistent applications:\n\n### Accessing the Guide\n\n**As a file:**\n```bash\n# After installation, the guide is available at:\nnode_modules/@cognite/cogs.js-v2/dist/AI_USAGE_GUIDE.md\n```\n\n**Direct import:**\n```tsx\n// Import the guide file directly\nimport guideContent from '@cognite/cogs.js-v2/ai-guide';\n```\n\n## 📦 Components\n\n### Typography\n- **Heading** - Semantic headings (H1-H6) with consistent styling\n- **Text** - Body text with various sizes and weights\n- **Label** - Form labels with required indicators\n- **Code** - Inline and block code formatting\n\n### Buttons\n- **Button** - Primary action buttons with multiple variants\n- **IconButton** - Compact buttons with icons only\n- **ButtonGroup** - Grouped button collections\n\n### Forms\n- **Input** - Text inputs with validation states\n- **SearchInput** - Specialized search input with clear functionality\n- **Select** - Dropdown selections\n- **Checkbox** - Single and grouped checkboxes\n- **Radio** - Radio button groups\n- **Switch** - Toggle switches\n- **Textarea** - Multi-line text inputs\n\n### Layout\n- **Container** - Responsive content containers\n- **Card** - Content cards with headers and footers\n- **Grid** - Responsive grid layouts\n- **Stack** - Flexible stacking layouts (HStack/VStack)\n- **Divider** - Content separators\n\n### Navigation\n- **Navbar** - Application navigation bars\n- **Sidebar** - Collapsible side navigation\n- **Breadcrumbs** - Navigation breadcrumbs\n- **Tabs** - Tabbed content navigation\n\n### Feedback\n- **Alert** - Status messages and notifications\n- **Badge** - Status indicators and labels\n- **NotificationBadge** - Count indicators\n- **Loading** - Loading states and skeletons\n- **Toast** - Temporary notifications\n- **Modal** - Dialog overlays\n\n### Data Display\n- **Table** - Data tables with sorting and selection\n- **List** - Item lists with various layouts\n- **DescriptionList** - Key-value pair displays\n- **Stats** - Statistical data display\n- **KPICard** - Key performance indicator cards\n- **Avatar** - User profile images and initials\n- **AvatarGroup** - Multiple avatar displays\n\n## 🎨 Design Tokens\n\nThe design system uses Cognite's color palette:\n\n### Colors\n- **Sapphire** - Primary brand color\n- **Emerald** - Success states\n- **Ruby** - Error states  \n- **Amber** - Warning states\n- **Turquoise** - Info states\n- **Amethyst** - Accent color\n- **Aquamarine** - Secondary accent\n- **Canary** - Highlight color\n- **Onyx** - Neutral grays\n\n### Typography\n- **Font Family**: Inter (primary), Source Code Pro (monospace)\n- **Sizes**: body-xxsmall, body-small, body-medium, body-large, heading-1 through heading-6\n\n### Spacing & Layout\n- **Border Radius**: xs (2px) to 4xl (32px)\n- **Container**: Responsive with max-widths\n- **Grid**: 12-column responsive grid system\n\n## 🤖 AI Usage Guidelines\n\nWhen using this design system for AI-generated applications:\n\n### 1. Component Selection\n```typescript\n// ✅ Good - Use semantic components\n<Card>\n  <CardHeader title=\"User Profile\" />\n  <CardContent>\n    <Avatar name=\"John Doe\" />\n    <Text>Software Engineer</Text>\n  </CardContent>\n</Card>\n\n// ❌ Avoid - Don't create custom styled divs\n<div className=\"bg-white p-4 rounded shadow\">\n  <div className=\"font-bold\">User Profile</div>\n  <div className=\"w-10 h-10 rounded-full bg-gray-300\"></div>\n</div>\n```\n\n### 2. Consistent Patterns\n```typescript\n// ✅ Form layouts\n<VStack gap=\"md\">\n  <Input label=\"Email\" required />\n  <Input label=\"Password\" type=\"password\" required />\n  <Button variant=\"primary\" fullWidth>Sign In</Button>\n</VStack>\n\n// ✅ Data display\n<StatsGroup \n  columns={3}\n  stats={[\n    { label: \"Total Users\", value: \"1,234\", change: { value: \"+12%\", type: \"increase\" } },\n    { label: \"Revenue\", value: \"$45,678\", change: { value: \"+8%\", type: \"increase\" } },\n    { label: \"Conversion\", value: \"3.2%\", change: { value: \"-2%\", type: \"decrease\" } }\n  ]}\n/>\n```\n\n### 3. Responsive Design\n```typescript\n// ✅ Use responsive props\n<Grid \n  cols={1} \n  responsive={{ md: 2, lg: 3 }}\n  gap=\"md\"\n>\n  <Card>Content 1</Card>\n  <Card>Content 2</Card>\n  <Card>Content 3</Card>\n</Grid>\n```\n\n### 4. Accessibility\n```typescript\n// ✅ Include proper labels and ARIA attributes\n<Modal \n  isOpen={isOpen} \n  onClose={onClose}\n  title=\"Confirm Action\"\n  description=\"This action cannot be undone\"\n>\n  <Text>Are you sure you want to delete this item?</Text>\n  <ModalFooter>\n    <Button variant=\"outline\" onClick={onClose}>Cancel</Button>\n    <Button variant=\"destructive\" onClick={onConfirm}>Delete</Button>\n  </ModalFooter>\n</Modal>\n```\n\n## 📱 Common Patterns\n\n### Dashboard Layout\n```typescript\n<Container maxWidth=\"7xl\">\n  <VStack gap=\"lg\">\n    <Navbar>\n      <NavbarBrand title=\"Cognite App\" />\n      <NavbarMenu>\n        <NavbarItem href=\"/dashboard\" active>Dashboard</NavbarItem>\n        <NavbarItem href=\"/analytics\">Analytics</NavbarItem>\n      </NavbarMenu>\n    </Navbar>\n    \n    <HStack gap=\"lg\" align=\"start\">\n      <Sidebar width=\"md\">\n        <SidebarSection title=\"Main\">\n          <SidebarItem icon={<DashboardIcon />} active>Dashboard</SidebarItem>\n          <SidebarItem icon={<UsersIcon />}>Users</SidebarItem>\n        </SidebarSection>\n      </Sidebar>\n      \n      <VStack gap=\"md\" className=\"flex-1\">\n        <StatsGroup columns={4} variant=\"cards\" stats={stats} />\n        <Grid cols={2} gap=\"md\">\n          <Card>\n            <CardHeader title=\"Recent Activity\" />\n            <CardContent>\n              <List>\n                {activities.map(activity => (\n                  <ListItem key={activity.id} {...activity} />\n                ))}\n              </List>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardHeader title=\"Performance\" />\n            <CardContent>\n              <KPICard \n                title=\"Monthly Growth\"\n                value=\"24.5%\"\n                progress={75}\n                trend={{ value: \"+5.2%\", type: \"up\", period: \"vs last month\" }}\n                status=\"success\"\n              />\n            </CardContent>\n          </Card>\n        </Grid>\n      </VStack>\n    </HStack>\n  </VStack>\n</Container>\n```\n\n### Form Layout\n```typescript\n<Card maxWidth=\"md\">\n  <CardHeader title=\"Create Account\" description=\"Fill in your details below\" />\n  <CardContent>\n    <VStack gap=\"md\">\n      <HStack gap=\"md\">\n        <Input label=\"First Name\" required />\n        <Input label=\"Last Name\" required />\n      </HStack>\n      <Input label=\"Email\" type=\"email\" required />\n      <Input label=\"Password\" type=\"password\" required />\n      <CheckboxGroup label=\"Preferences\">\n        <Checkbox label=\"Email notifications\" />\n        <Checkbox label=\"SMS notifications\" />\n      </CheckboxGroup>\n      <Button variant=\"primary\" fullWidth>Create Account</Button>\n    </VStack>\n  </CardContent>\n</Card>\n```\n\n### Data Table\n```typescript\n<Card>\n  <CardHeader title=\"Users\" action={<Button>Add User</Button>} />\n  <CardContent>\n    <Table\n      columns={[\n        { key: 'name', title: 'Name', dataIndex: 'name' },\n        { key: 'email', title: 'Email', dataIndex: 'email' },\n        { key: 'role', title: 'Role', dataIndex: 'role', \n          render: (role) => <Badge variant=\"primary\">{role}</Badge> },\n        { key: 'status', title: 'Status', dataIndex: 'status',\n          render: (status) => <Badge variant={status === 'active' ? 'success' : 'error'}>{status}</Badge> }\n      ]}\n      data={users}\n      rowSelection={{\n        selectedRowKeys,\n        onChange: setSelectedRowKeys\n      }}\n    />\n  </CardContent>\n</Card>\n```\n\n## 🎯 Best Practices for AI\n\n1. **Always use design system components** instead of custom HTML/CSS\n2. **Follow consistent spacing** using the gap props (xs, sm, md, lg, xl)\n3. **Use semantic color variants** (primary, success, warning, error) over specific colors\n4. **Implement proper loading states** for async operations\n5. **Include error handling** with appropriate error messages\n6. **Make forms accessible** with proper labels and validation\n7. **Use responsive layouts** that work on all screen sizes\n8. **Follow the component composition patterns** shown in examples\n\n## 🔧 Customization\n\nThe design system uses CSS custom properties for theming. Colors can be customized by updating the CSS variables:\n\n```css\n:root {\n  --ds-color-sapphire-500: #your-primary-color;\n  --ds-color-emerald-500: #your-success-color;\n  /* ... other color overrides */\n}\n```\n\n## 📚 TypeScript Support\n\nAll components are fully typed with TypeScript interfaces. Import types as needed:\n\n```typescript\nimport { ButtonProps, CardProps, InputProps } from '@cognite/design-system';\n```\n\n## 🚀 Development\n\n### Building the Library\n\n```bash\n# Build for production\nnpm run build\n\n# Build and watch for changes\nnpm run build:lib -- --watch\n```\n\n### Publishing\n\n```bash\n# Build and publish to npm\nnpm run prepublishOnly\nnpm publish --access public\n```\n\n## 🤝 Contributing\n\n1. Follow the existing component patterns\n2. Use TypeScript for all components\n3. Include comprehensive prop documentation\n4. Test components in Storybook\n5. Follow Cognite's design principles\n\n## 📄 License\n\nMIT License - see LICENSE file for details.\n\n---\n\nThis design system provides everything needed to create consistent, professional applications that align with Cognite's brand guidelines while being optimized for AI-driven development workflows.\n","readmeFilename":"README.md"}