{"_id":"@amafjarkasi/hd-eui-core","_rev":"4-c1c46b9d0cc27bd5769341a9e7fa52e0","name":"@amafjarkasi/hd-eui-core","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@amafjarkasi/hd-eui-core","version":"1.0.0","keywords":["react","ui-library","typescript","tailwindcss","hyperdense","b2b","zendesk-inspired","compact-ui","enterprise-ui","hyper-density","data-dense"],"author":{"name":"Your Name"},"license":"MIT","_id":"@amafjarkasi/hd-eui-core@1.0.0","maintainers":[{"name":"amafjarkasi","email":"amafjarkasi@gmail.com"}],"homepage":"https://github.com/amafjarkasi/hd-eui-core#readme","bugs":{"url":"https://github.com/amafjarkasi/hd-eui-core/issues"},"dist":{"shasum":"29f0520e85ae8210b55cc14bc1c40d2003783165","tarball":"https://registry.npmjs.org/@amafjarkasi/hd-eui-core/-/hd-eui-core-1.0.0.tgz","fileCount":56,"integrity":"sha512-GHqIwws7YFRBm6rShu1V/0HD9oMHz3lm0RRkhEahJ4bOMAhM5CtPreVTwMAzYi1imEdSQipXK9n50LOVUoO1cQ==","signatures":[{"sig":"MEYCIQCyPuRMYudz8umafVtlhbUnBccvX2peoo7c6GT+u638IwIhANTnb9IbHkYNi6gqXSv397eUTrwEagkxOeHAToO1G2RJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68398},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"07a3e0757c2c6daac6ab7ee575292b813202b042","scripts":{"lint":"eslint . --ext .ts,.tsx","test":"jest","build":"tsc","watch":"tsc -w","storybook":"storybook dev -p 6006"},"_npmUser":{"name":"amafjarkasi","email":"amafjarkasi@gmail.com"},"repository":{"url":"git+https://github.com/amafjarkasi/hd-eui-core.git","type":"git"},"_npmVersion":"10.9.2","description":"HD-EUI Core: Hyper-Dense Enterprise UI Library – React TypeScript components for hyper-dense B2B apps, inspired by Zendesk's Compact Utilitarian design with ultra-tight spacing and strict color palettes.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"lucide-react":"^0.460.0"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.0.0","jest":"^29.0.0","eslint":"^8.0.0","postcss":"^8.4.0","typescript":"^5.0.0","tailwindcss":"^3.0.0","@types/react":"^18.0.0","autoprefixer":"^10.4.0","@types/react-dom":"^18.0.0","eslint-plugin-react":"^7.0.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_npmOperationalInternal":{"tmp":"tmp/hd-eui-core_1.0.0_1772267775146_0.33186507652596986","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amafjarkasi/hd-eui-core","version":"1.0.1","keywords":["react","ui-library","typescript","tailwindcss","hyperdense","b2b","zendesk-inspired","compact-ui","enterprise-ui","hyper-density","data-dense"],"author":{"name":"Your Name"},"license":"MIT","_id":"@amafjarkasi/hd-eui-core@1.0.1","maintainers":[{"name":"amafjarkasi","email":"amafjarkasi@gmail.com"}],"homepage":"https://github.com/amafjarkasi/hd-eui-core#readme","bugs":{"url":"https://github.com/amafjarkasi/hd-eui-core/issues"},"dist":{"shasum":"f6469dc14f9cc23e1620cca6eace2606576d96ea","tarball":"https://registry.npmjs.org/@amafjarkasi/hd-eui-core/-/hd-eui-core-1.0.1.tgz","fileCount":59,"integrity":"sha512-Dk1+2WR/HBypUEH+tuQGzpdYa4zeDN/I/mnac6PcPycv+BWJ/1Dv5Uthu19G+RXOFBHRDjjariPvo5Rird0cUA==","signatures":[{"sig":"MEYCIQDNNHneeeMLXoqcD87G2QpqeNXRjut6Gv5Fu6sc8adSxwIhALJBTEIY9vpjIEpDPl9PUfBz16WsdwM1dpfCy9t0fjvG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":71884},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"fd63ed1746a0ec810498ed07b8084517982448ec","scripts":{"lint":"eslint . --ext .ts,.tsx","test":"jest","build":"tsc","watch":"tsc -w","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"amafjarkasi","email":"amafjarkasi@gmail.com"},"repository":{"url":"git+https://github.com/amafjarkasi/hd-eui-core.git","type":"git"},"_npmVersion":"10.9.2","description":"πŸ’Ž HD-EUI Core: An elite-tier, TypeScript-native React component library engineered for high-stakes enterprise environments. Built on the principles of Hyper-Density, Structured Boundaries, and Micro-Typography, it provides a data-rich experience inspired","directories":{},"_nodeVersion":"22.14.0","dependencies":{"lucide-react":"^0.460.0"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.0.0","jest":"^29.0.0","vite":"^7.3.1","eslint":"^8.0.0","postcss":"^8.4.0","storybook":"^8.6.14","typescript":"^5.0.0","tailwindcss":"^3.0.0","@types/react":"^18.0.0","autoprefixer":"^10.4.0","@types/react-dom":"^18.0.0","eslint-plugin-react":"^7.0.0","@storybook/react-vite":"^8.6.14","@storybook/builder-vite":"^8.6.14","@storybook/addon-essentials":"^8.6.14","@storybook/addon-interactions":"^8.6.14"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_npmOperationalInternal":{"tmp":"tmp/hd-eui-core_1.0.1_1772344096306_0.2026625060952374","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-02-28T08:36:14.996Z","modified":"2026-04-18T13:15:08.863Z","1.0.0":"2026-02-28T08:36:15.291Z","1.0.1":"2026-03-01T05:48:16.450Z"},"bugs":{"url":"https://github.com/amafjarkasi/hd-eui-core/issues"},"author":{"name":"Your Name"},"license":"MIT","homepage":"https://github.com/amafjarkasi/hd-eui-core#readme","keywords":["react","ui-library","typescript","tailwindcss","hyperdense","b2b","zendesk-inspired","compact-ui","enterprise-ui","hyper-density","data-dense"],"repository":{"url":"git+https://github.com/amafjarkasi/hd-eui-core.git","type":"git"},"description":"πŸ’Ž HD-EUI Core: An elite-tier, TypeScript-native React component library engineered for high-stakes enterprise environments. Built on the principles of Hyper-Density, Structured Boundaries, and Micro-Typography, it provides a data-rich experience inspired","maintainers":[{"name":"amafjarkasi","email":"amafjarkasi@gmail.com"}],"readme":"# πŸ’Ž HD-EUI Core: The High-Density Enterprise UI Framework\r\n\r\n[![NPM Version](https://img.shields.io/npm/v/@amafjarkasi/hd-eui-core?style=for-the-badge&color=2f3941&logo=npm)](https://www.npmjs.com/package/@amafjarkasi/hd-eui-core)\r\n[![License](https://img.shields.io/npm/l/@amafjarkasi/hd-eui-core?style=for-the-badge&color=87929d)](LICENSE)\r\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@amafjarkasi/hd-eui-core?style=for-the-badge&color=1f73b7)](https://bundlephobia.com/package/@amafjarkasi/hd-eui-core)\r\n[![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://hd-eui-storybook.netlify.app)\r\n[![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\r\n\r\n**HD-EUI Core** is an elite-tier, TypeScript-native React component library engineered for high-stakes enterprise environments. While modern design trends favor excessive whitespace, HD-EUI Core is built for the **Power User**β€”providing a hyper-dense, data-rich experience inspired by the **Zendesk Compact Utilitarian** design system.\r\n\r\n[**Explore the Interactive Documentation (Storybook) β†’**](https://hd-eui-storybook.netlify.app)\r\n\r\n---\r\n\r\n## πŸ“ The Philosophy of Hyper-Density\r\n\r\nIn complex B2B applications, admin panels, and real-time monitoring systems, \"white space\" is often wasted space. HD-EUI Core optimizes every pixel to maximize information throughput without compromising cognitive clarity.\r\n\r\n### The Three Pillars:\r\n1. **Hyper-Density**: Standardized micro-spacing (`2px` - `4px` gaps) and tight padding (`p-1`) to maximize screen real estate.\r\n2. **Structured Boundaries**: Hard `1px` borders (`#d8dcde`) replace soft shadows, providing immediate visual sectioning for complex data sets.\r\n3. **Micro-Typography**: A precision-tuned typographic scale (`8px` to `11px`) designed for readability at small sizes.\r\n\r\n---\r\n\r\n## ✨ Key Features\r\n\r\n* πŸš€ **33+ Production-Ready Components**: A comprehensive suite covering Layout, Forms, Data Display, and Navigation.\r\n* 🎨 **Tailwind CSS Native**: Fully integrated with Tailwind's utility-first engine for zero-overhead styling.\r\n* πŸ›‘οΈ **Strict TypeScript Excellence**: 100% type-safe with exported interfaces for every component, prop, and event handler.\r\n* β™Ώ **Enterprise Accessibility**: Built-in ARIA support, keyboard navigation, and high-contrast focus states.\r\n* πŸ“¦ **Ultra-Lightweight**: ~20KB gzipped bundle size with full tree-shaking support.\r\n* πŸŒ“ **Professional Monochrome Palette**: A sophisticated slate-and-azure palette designed for long-duration focus.\r\n\r\n---\r\n\r\n## 🎨 Design System Specifications\r\n\r\n### Color Palette (Strict Hex Codes)\r\n| Token | Hex | Usage |\r\n| :--- | :--- | :--- |\r\n| **Primary Text/Actions** | `#2f3941` | Main text, primary buttons, active states. |\r\n| **Hover State** | `#1f252a` | Hover backgrounds for primary actions. |\r\n| **Borders/Dividers** | `#d8dcde` | Hard 1px borders for sectioning. |\r\n| **Brand/Focus/Active** | `#1f73b7` | Focus rings, links, brand accents. |\r\n| **Muted/Secondary** | `#87929d` | Secondary text, disabled states, icons. |\r\n| **Background (Light)** | `#ffffff` | Main workspace background. |\r\n| **Background (Dark)** | `#f8f9fa` | Sidebar and header backgrounds. |\r\n\r\n### Typographic Scale\r\n| Level | Size | Weight | Line Height |\r\n| :--- | :--- | :--- | :--- |\r\n| **Header** | `11px` | Bold (700) | `1.2` |\r\n| **Body** | `10px` | Regular (400) | `1.3` |\r\n| **Muted** | `9px` | Regular (400) | `1.2` |\r\n| **Micro** | `8px` | Regular (400) | `1.1` |\r\n| **Mono** | `10px` | Monospace | `1.2` |\r\n\r\n### Spacing System\r\n| Token | Value | Usage |\r\n| :--- | :--- | :--- |\r\n| **Micro** | `1px` | Hairline separators. |\r\n| **Tight** | `2px` | Internal component padding. |\r\n| **Ultra** | `4px` | Gaps between related elements. |\r\n| **Normal** | `8px` | Section padding. |\r\n\r\n---\r\n\r\n## πŸ“¦ Installation\r\n\r\n```bash\r\nnpm install @amafjarkasi/hd-eui-core\r\n```\r\n\r\n### Peer Dependencies\r\nEnsure your project has the following installed:\r\n```bash\r\nnpm install react react-dom tailwindcss lucide-react clsx\r\n```\r\n\r\n---\r\n\r\n## πŸ› οΈ Configuration\r\n\r\nTo unlock the full power of the HD-EUI design system, update your `tailwind.config.js`:\r\n\r\n```javascript\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n content: [\r\n \"./src/**/*.{js,ts,jsx,tsx}\",\r\n \"./node_modules/@amafjarkasi/hd-eui-core/dist/**/*.{js,ts,jsx,tsx}\",\r\n ],\r\n theme: {\r\n extend: {\r\n colors: {\r\n hd: {\r\n primary: \"#2f3941\",\r\n \"primary-hover\": \"#1f252a\",\r\n border: \"#d8dcde\",\r\n focus: \"#1f73b7\",\r\n muted: \"#87929d\",\r\n \"bg-light\": \"#ffffff\",\r\n \"bg-dark\": \"#f8f9fa\",\r\n },\r\n },\r\n fontSize: {\r\n header: [\"11px\", { lineHeight: \"1.2\", fontWeight: \"700\" }],\r\n body: [\"10px\", { lineHeight: \"1.3\" }],\r\n muted: [\"9px\", { lineHeight: \"1.2\" }],\r\n micro: [\"8px\", { lineHeight: \"1.1\" }],\r\n mono: [\"10px\", { fontFamily: \"monospace\", lineHeight: \"1.2\" }],\r\n },\r\n spacing: {\r\n tight: \"2px\",\r\n ultra: \"4px\",\r\n micro: \"1px\",\r\n },\r\n },\r\n },\r\n plugins: [],\r\n};\r\n```\r\n\r\n---\r\n\r\n## πŸš€ Quick Start\r\n\r\n### 1. Basic Component Usage\r\n```tsx\r\nimport { Button, Card, Badge } from '@amafjarkasi/hd-eui-core';\r\n\r\nconst App = () => (\r\n \r\n
\r\n Online\r\n Core Engine Active\r\n
\r\n \r\n \r\n);\r\n```\r\n\r\n### 2. Data-Dense Table with Sorting\r\n```tsx\r\nimport { Table, Badge } from '@amafjarkasi/hd-eui-core';\r\n\r\nconst columns = [\r\n { key: 'id', header: 'ID', width: '60px' },\r\n { key: 'user', header: 'User', sortable: true },\r\n { key: 'role', header: 'Role', render: (val) => {val} }\r\n];\r\n\r\nconst data = [\r\n { id: '001', user: 'Amaf J.', role: 'Admin' },\r\n { id: '002', user: 'John D.', role: 'Editor' }\r\n];\r\n\r\n console.log(`Sorting ${key} by ${dir}`)} \r\n/>\r\n```\r\n\r\n---\r\n\r\n## πŸ“š Component Catalog\r\n\r\n| Category | Components | Description |\r\n| :--- | :--- | :--- |\r\n| **Layout** | `Card`, `CardGrid`, `Modal`, `Sidebar`, `Accordion`, `Tabs` | Structural components for organizing complex views. |\r\n| **Form** | `Button`, `Input`, `Form`, `Select`, `Checkbox`, `Radio`, `Slider`, `Dropdown` | High-density input controls with validation support. |\r\n| **Data Display** | `Table`, `Tree`, `Badge`, `Avatar`, `List`, `CodeEditor`, `Calendar` | Optimized for high-throughput information visualization. |\r\n| **Feedback** | `Alert`, `AlertDialog`, `Toast`, `Notification`, `Spinner`, `ProgressBar`, `Skeleton`, `Tooltip`, `Popover` | Contextual messaging and loading states. |\r\n| **Navigation** | `Breadcrumb`, `Pagination`, `Stepper`, `Navbar` | Compact wayfinding for deep application hierarchies. |\r\n\r\n---\r\n\r\n## 🎨 Theming & Customization\r\n\r\nHD-EUI Core is built on design tokens. You can import these tokens directly into your own custom components to maintain visual consistency across your entire application:\r\n\r\n```tsx\r\nimport { colors, spacing, fontSize } from '@amafjarkasi/hd-eui-core';\r\n\r\nconst CustomPanel = () => (\r\n
\r\n

Custom Header

\r\n

Integrated with HD-EUI tokens.

\r\n
\r\n);\r\n```\r\n\r\n---\r\n\r\n## πŸ§ͺ Development Workflow\r\n\r\nIf you wish to contribute or modify the library:\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone https://github.com/amafjarkasi/hd-eui-core.git\r\n\r\n# Install dependencies\r\nnpm install\r\n\r\n# Start Storybook for interactive development\r\nnpm run storybook\r\n\r\n# Build the library for production\r\nnpm run build\r\n\r\n# Run unit tests with Jest\r\nnpm test\r\n```\r\n\r\n---\r\n\r\n## 🀝 Contributing\r\n\r\nWe are building the future of high-density UI. We welcome all contributions!\r\n1. Fork the repository.\r\n2. Create a feature branch (`git checkout -b feature/amazing-component`).\r\n3. Commit your changes (`git commit -m 'Add some amazing component'`).\r\n4. Push to the branch (`git push origin feature/amazing-component`).\r\n5. Open a Pull Request.\r\n\r\nPlease see [CONTRIBUTING.md](CONTRIBUTING.md) for more details.\r\n\r\n---\r\n\r\n## πŸ“„ License\r\n\r\nDistributed under the MIT License. See `LICENSE` for more information.\r\n\r\n---\r\n\r\n## πŸ“§ Support & Community\r\n\r\n* **Issues**: [GitHub Issue Tracker](https://github.com/amafjarkasi/hd-eui-core/issues)\r\n* **Discussions**: [GitHub Discussions](https://github.com/amafjarkasi/hd-eui-core/discussions)\r\n* **Security**: See [SECURITY.md](SECURITY.md) for reporting vulnerabilities.\r\n\r\nBuilt with ❀️ by [amafjarkasi](https://github.com/amafjarkasi). If you find this library useful, please give it a ⭐ on GitHub!","readmeFilename":"README.md"}