{"_id":"@cra-risk-management/ui","_rev":"3-5beca53823748ccf4195b10e8198bf36","name":"@cra-risk-management/ui","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@cra-risk-management/ui","version":"1.0.0","_id":"@cra-risk-management/ui@1.0.0","maintainers":[{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"}],"dist":{"shasum":"42a0bc61d592f23a2f970ef2f5b65000f5a9ff50","tarball":"https://registry.npmjs.org/@cra-risk-management/ui/-/ui-1.0.0.tgz","fileCount":39,"integrity":"sha512-oybxVXFBFNYQY6+nqGKXcERDaCdlb3BJD1HqRUDqsBddOusYH2OOwwPJKQpIypbCYmsKCHZ6XpZqh7hlGYmtOw==","signatures":[{"sig":"MEQCIBbVc6/fbAqZQuUzT64tXIUiEhgGzz/Eo9dncmbtudwTAiA8+Lg0SlNbWkqPnpCKP65CFBqwBxDSCuR6vQZrqs3Tnw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":71301},"main":"./dist/ui.cjs","type":"module","types":"./dist/src/index.d.ts","module":"./dist/ui.js","exports":{".":{"types":"./dist/src/index.d.ts","import":"./dist/ui.js","require":"./dist/ui.cjs"}},"gitHead":"fc8a264f1e44c7d1fda59633df9ea638617ed61b","scripts":{"build":"tsc && vite build","watch":"vite build --watch"},"_npmUser":{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"},"_npmVersion":"11.13.0","description":"Standardized UI Component Library for CRA Risk Management Monorepo applications (`critical-points` and `geovisor-ambiental`).","directories":{},"_nodeVersion":"26.2.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.12","react":"^19.2.6","leaflet":"^1.9.4","postcss":"^8.5.15","zustand":"^5.0.14","react-dom":"^19.2.6","typescript":"~6.0.2","@types/node":"^24.12.3","@types/react":"^19.2.14","@mantine/core":"^9.2.2","react-leaflet":"^5.0.0","@emotion/react":"^11.14.0","@mantine/hooks":"^9.2.2","@types/leaflet":"^1.9.21","@emotion/styled":"^11.14.1","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.2.3","react-geolocated":"^4.4.0","@mui/icons-material":"^9.0.1","postcss-simple-vars":"^7.0.1","@vitejs/plugin-react":"^6.0.1","postcss-preset-mantine":"^1.18.0"},"peerDependencies":{"react":"^19.0.0","leaflet":"^1.9.0","zustand":"^5.0.0","react-dom":"^19.0.0","@mantine/core":"^9.0.0","react-leaflet":"^5.0.0","@emotion/react":"^11.0.0","@mantine/hooks":"^9.0.0","@emotion/styled":"^11.0.0","react-geolocated":"^4.0.0","@mui/icons-material":"^5.0.0 || ^6.0.0 || ^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.0.0_1783891173360_0.6882669040532683","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cra-risk-management/ui","version":"1.0.1","_id":"@cra-risk-management/ui@1.0.1","maintainers":[{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"}],"dist":{"shasum":"8c160b9bfce5a2e5cb3e7596045719a869b5fbe1","tarball":"https://registry.npmjs.org/@cra-risk-management/ui/-/ui-1.0.1.tgz","fileCount":39,"integrity":"sha512-9iImHlLf3Qx0KOKD9coC1OhJKRdBI0xXsDvAgnWOAdZFlbxO40WaoP6vlJQpo9kWhBBB8b9gxuXE9Bg1lbt8Fg==","signatures":[{"sig":"MEUCID3WzX6WE6IlDt4Hv42rFz9EW5QXxRX6Nnb1ExDRuPbGAiEAtWitiy4aWlOdJlAltS4JLvI7iIV0Q8Iqoc20NnYfD5E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":71609},"main":"./dist/ui.cjs","type":"module","types":"./dist/src/index.d.ts","module":"./dist/ui.js","exports":{".":{"types":"./dist/src/index.d.ts","import":"./dist/ui.js","require":"./dist/ui.cjs"}},"gitHead":"7eb40b8d981bf0723f588bc5320d59f86569c120","scripts":{"build":"tsc && vite build","watch":"vite build --watch"},"_npmUser":{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"},"_npmVersion":"11.13.0","description":"Standardized UI Component Library for CRA Risk Management Monorepo applications (`critical-points` and `geovisor-ambiental`).","directories":{},"_nodeVersion":"26.2.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.12","react":"^19.2.6","leaflet":"^1.9.4","postcss":"^8.5.15","zustand":"^5.0.14","react-dom":"^19.2.6","typescript":"~6.0.2","@types/node":"^24.12.3","@types/react":"^19.2.14","@mantine/core":"^9.4.1","react-leaflet":"^5.0.0","@emotion/react":"^11.14.0","@mantine/hooks":"^9.4.1","@types/leaflet":"^1.9.21","@emotion/styled":"^11.14.1","vite-plugin-dts":"^4.5.0","@types/react-dom":"^19.2.3","react-geolocated":"^4.4.0","@mui/icons-material":"^9.2.0","postcss-simple-vars":"^7.0.1","@vitejs/plugin-react":"^6.0.1","postcss-preset-mantine":"^1.18.0"},"peerDependencies":{"react":"^19.0.0","leaflet":"^1.9.0","zustand":"^5.0.0","react-dom":"^19.0.0","@mantine/core":"^9.0.0","react-leaflet":"^5.0.0","@emotion/react":"^11.0.0","@mantine/hooks":"^9.0.0","@emotion/styled":"^11.0.0","react-geolocated":"^4.0.0","@mui/icons-material":"^5.0.0 || ^6.0.0 || ^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.0.1_1783893913010_0.8241292425940316","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@cra-risk-management/ui","version":"1.0.2","type":"module","main":"./dist/ui.cjs","module":"./dist/ui.js","types":"./dist/src/index.d.ts","exports":{".":{"types":"./dist/src/index.d.ts","import":"./dist/ui.js","require":"./dist/ui.cjs"}},"scripts":{"build":"tsc && vite build","watch":"vite build --watch"},"peerDependencies":{"@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0","@mantine/core":"^9.0.0","@mantine/hooks":"^9.0.0","@mui/icons-material":"^5.0.0 || ^6.0.0 || ^9.0.0","leaflet":"^1.9.0","react":"^19.0.0","react-dom":"^19.0.0","react-geolocated":"^4.0.0","react-leaflet":"^5.0.0","zustand":"^5.0.0"},"devDependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mantine/core":"^9.4.1","@mantine/hooks":"^9.4.1","@mui/icons-material":"^9.2.0","@types/leaflet":"^1.9.21","@types/node":"^24.12.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","leaflet":"^1.9.4","postcss":"^8.5.15","postcss-preset-mantine":"^1.18.0","postcss-simple-vars":"^7.0.1","react":"^19.2.6","react-dom":"^19.2.6","react-geolocated":"^4.4.0","react-leaflet":"^5.0.0","typescript":"~6.0.2","vite":"^8.0.12","vite-plugin-dts":"^4.5.0","zustand":"^5.0.14"},"gitHead":"7f85cbb4456b2609c020a81d60a8d3c8f82004d6","_id":"@cra-risk-management/ui@1.0.2","description":"Standardized UI Component Library for CRA Risk Management Monorepo applications (`critical-points` and `geovisor-ambiental`).","_nodeVersion":"26.2.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-OHEwo5AO1eIJXBk4FYKQjZns29Qe0ZsxZXLc0y+i8vDmOacZ3uMUlPk9VW3JL7dekYZWH9KAq7aUZn6/WKiA3w==","shasum":"c131bbf03cf72931720229ec997e17bcee4e124e","tarball":"https://registry.npmjs.org/@cra-risk-management/ui/-/ui-1.0.2.tgz","fileCount":39,"unpackedSize":71642,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAeOnXuTISigS/CrvYUfrYPh/d7pPo49PRpIV4dpR+RjAiEArgBc2bV5wM8LB9ky4Tbx8aPg36L9PC8WkH0sHtMsGlw="}]},"_npmUser":{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"},"directories":{},"maintainers":[{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.0.2_1783977441653_0.8301104199177822"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-12T21:19:33.171Z","modified":"2026-07-13T21:17:21.924Z","1.0.0":"2026-07-12T21:19:33.500Z","1.0.1":"2026-07-12T22:05:13.123Z","1.0.2":"2026-07-13T21:17:21.795Z"},"description":"Standardized UI Component Library for CRA Risk Management Monorepo applications (`critical-points` and `geovisor-ambiental`).","maintainers":[{"name":"sebnarvaez19","email":"sebnarvaez19@gmail.com"}],"readme":"# @cra-risk-management/ui\r\n\r\nStandardized UI Component Library for CRA Risk Management Monorepo applications (`critical-points` and `geovisor-ambiental`).\r\n\r\n---\r\n\r\n## Installation\r\n\r\nInstall the library via npm (or your preferred package manager):\r\n\r\n```bash\r\nnpm install @cra-risk-management/ui\r\n```\r\n\r\n### Peer Dependencies\r\n\r\nThe library requires **Mantine v9** (`@mantine/core` and `@mantine/hooks` >= `^9.0.0`) and **React v19**. Make sure you have the required peer dependencies installed in your project:\r\n\r\n```bash\r\nnpm install @mantine/core @mantine/hooks @emotion/react @emotion/styled @mui/icons-material react-geolocated leaflet react-leaflet zustand\r\n```\r\n\r\n### Styling Setup\r\n\r\nImport the global styles in your application entry file (e.g., `App.tsx` or `main.tsx`):\r\n\r\n```typescript\r\nimport \"@mantine/core/styles.css\";\r\nimport \"@cra-risk-management/ui/dist/ui.css\"; // Optional custom library styles\r\n```\r\n\r\nWrap your root application with `CraThemeProvider`:\r\n\r\n```typescript\r\nimport { CraThemeProvider } from \"@cra-risk-management/ui\";\r\n\r\nfunction App() {\r\n  return (\r\n    <CraThemeProvider>\r\n      <YourAppContent />\r\n    </CraThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## Components Summary\r\n\r\n### 1. Structure & Layout\r\n- **`CraThemeProvider`**: Sets up custom Mantine theme configurations (colors, fonts).\r\n- **`NavBar`**: Navigation header bar with branding slots.\r\n- **`ColorSchemeToggler`**: Light/Dark theme switch button.\r\n- **`PanelButtons` & `PanelButton` & `InfoButton`**: Floating control actions stacked at the bottom of the map.\r\n\r\n### 2. Standardized Cards (`CraCard`)\r\nStandardized responsive container blocks.\r\n- **`CraCard`**: Parent card wrapper.\r\n- **`CraCardHeader`**: Title/Subtitle block.\r\n- **`CraCardImage`**: Rounded top cover image.\r\n- **`CraCardBody`**: Main paragraph/content block with line clamping support.\r\n- **`CraCardChip`**: Category pills.\r\n- **`CraCardFooter`**: Footer actions container.\r\n- **`CraCardInfoRow`**: Grid-aligned key-value display rows.\r\n\r\n### 3. Responsive Overlays (`CraPanel`)\r\nHarmonized panel overlays with responsive widths/heights (desktop/mobile defaults).\r\n- **`CraPanel`**: Backdrop dialog. Takes `size` (`\"sm\"`, `\"md\"`, `\"xl\"`).\r\n- **`CraPanelHeader`**: Title block with built-in close action.\r\n- **`CraPanelBody`**: Scrollable body content.\r\n- **`CraPanelFooter`**: Footer button layout.\r\n\r\n### 4. Interactive Maps\r\nLeaflet containers synced to store state.\r\n- **`CraMap`**: Standard Leaflet map pane.\r\n- **`MapControls`**: Float-overlay control buttons (Zoom, Home, Geolocation, Basemap).\r\n- **`CraLocationInputMap`**: Controlled point and polygon coordinate capture map.\r\n\r\n### 5. Lists & Feeds (`CraDataCardList`)\r\nGeneric scrolled list containers for feeds.\r\n- **`CraDataCardList`**: Handles scroll boxes and empty states.\r\n- **`CraDataCardEntry`**: Feeds list cards with a square `1:1` cover image.\r\n\r\n### 6. Layer Selectors (`CraLayerSelector`)\r\nOption selection panel lists styled as interactive cards.\r\n- **`CraLayerSelector`**: Wrapper box.\r\n- **`CraLayerSelectorOption`**: Option cards with radio selects, colored initials avatars, and labels.\r\n","readmeFilename":"README.md"}