{"_id":"@airlib/material","_rev":"5-4b2204c76e369323d4138cac17593efa","name":"@airlib/material","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@airlib/material","version":"1.0.0","keywords":["material","design","m3","css","theme","tailwind","air-stack"],"author":"Nanang Mahdaen El Agung <mahdaen@gmail.com>","license":"MIT","_id":"@airlib/material@1.0.0","maintainers":[{"name":"mahdaen","email":"mahdaen@gmail.com"}],"bugs":{"url":"https://github.com/beerush-id/airlib/issues"},"dist":{"shasum":"f4392629931972dea8e5c90e132ddd80fccf5d24","tarball":"https://registry.npmjs.org/@airlib/material/-/material-1.0.0.tgz","fileCount":53,"integrity":"sha512-MqbT61ADLhzTXUJmmNtZCz2AeLVRp+3QSHLfdlGr4WtBnqw8rharGO/cb7L9BfMVo68vDqiPpQ9c4cirTLFGtQ==","signatures":[{"sig":"MEQCICw2V39G5FKhpgW1Ma9FPKnS+gSVytgtXeuPg/lWrDnAAiAIt2R05U6ed+T3Vg6tlw0fNwV6aQ19fXjbC/P6w2TheQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152109},"type":"module","shasum":"f4392629931972dea8e5c90e132ddd80fccf5d24","exports":{".":"./src/index.css","./*":"./src/*"},"scripts":{"format":"biome format --write","prepublish":"bun run format"},"_npmUser":{"name":"mahdaen","email":"mahdaen@gmail.com"},"_integrity":"sha512-MqbT61ADLhzTXUJmmNtZCz2AeLVRp+3QSHLfdlGr4WtBnqw8rharGO/cb7L9BfMVo68vDqiPpQ9c4cirTLFGtQ==","repository":{"url":"git+https://github.com/beerush-id/airlib.git","type":"git"},"_npmVersion":"10.8.3","description":"Material Design 3 Headless Component Library CSS Theme","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"publint":"^0.3.0","@biomejs/biome":"^2.3.0"},"peerDependencies":{"tailwindcss":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/material_1.0.0_1781075047484_0.7911526112248448","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@airlib/material","version":"1.0.1","keywords":["material","design","m3","css","theme","tailwind","air-stack"],"author":"Nanang Mahdaen El Agung <mahdaen@gmail.com>","license":"MIT","_id":"@airlib/material@1.0.1","maintainers":[{"name":"mahdaen","email":"mahdaen@gmail.com"}],"bugs":{"url":"https://github.com/beerush-id/airlib/issues"},"dist":{"shasum":"7fcef6f96eb4cd55b4e55109ae655fdddf256a39","tarball":"https://registry.npmjs.org/@airlib/material/-/material-1.0.1.tgz","fileCount":53,"integrity":"sha512-q262noUSj8TD8m8jpBwS/MAUtWhnNMzZTIDP2dn+kwgf2GwHDefvpJwPvybe7jeNdTolkR5bC8f+F/LQfJf5Sw==","signatures":[{"sig":"MEQCIDgUztUcbr4V9RPnUWrGzxxIkf+G+et93utJgl+bdJ4gAiB07CT8EcJxN4JWNtMnucaNufGJsEXOZUUc5QT6qDZi+w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152154},"type":"module","shasum":"7fcef6f96eb4cd55b4e55109ae655fdddf256a39","exports":{".":"./src/index.css","./*":"./src/*"},"scripts":{"build":"bun run build.ts","format":"biome format --write","prepublish":"bun run format"},"_npmUser":{"name":"mahdaen","email":"mahdaen@gmail.com"},"_integrity":"sha512-q262noUSj8TD8m8jpBwS/MAUtWhnNMzZTIDP2dn+kwgf2GwHDefvpJwPvybe7jeNdTolkR5bC8f+F/LQfJf5Sw==","repository":{"url":"git+https://github.com/beerush-id/airlib.git","type":"git"},"_npmVersion":"10.8.3","description":"Material Design 3 Headless Component Library CSS Theme","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"publint":"^0.3.0","@types/bun":"^1.3.0","@biomejs/biome":"^2.3.0","@tailwindcss/cli":"4.3.0"},"peerDependencies":{"tailwindcss":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/material_1.0.1_1781137878349_0.5741443447978145","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@airlib/material","version":"1.0.2","keywords":["material","design","m3","css","theme","tailwind","air-stack"],"author":"Nanang Mahdaen El Agung <mahdaen@gmail.com>","license":"MIT","_id":"@airlib/material@1.0.2","maintainers":[{"name":"mahdaen","email":"mahdaen@gmail.com"}],"bugs":{"url":"https://github.com/beerush-id/airlib/issues"},"dist":{"shasum":"b8c9a0fa72adfdf8c37718a2b5129bcd63af9e03","tarball":"https://registry.npmjs.org/@airlib/material/-/material-1.0.2.tgz","fileCount":54,"integrity":"sha512-izGInRz6bW1io0VJM1RYPudjq1f31csfR4BwZ4JZICBN5pFr8HgOFzjTz4Jtrbf/z/kY9L2GI+zOJSvk8vFB4Q==","signatures":[{"sig":"MEUCICRIHYGRR0IbFU5evWJsmrZBgSe0B5VX265NUAhVWcWsAiEAkybk1AybPlsQ4FU+V17KlCilS1u2A9ZbVhrHhhSynm4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":433765},"type":"module","shasum":"b8c9a0fa72adfdf8c37718a2b5129bcd63af9e03","exports":{".":"./src/index.css","./*":"./src/*"},"scripts":{"build":"bun run build.ts","format":"biome format --write","prepublish":"bun run format"},"_npmUser":{"name":"mahdaen","email":"mahdaen@gmail.com"},"_integrity":"sha512-izGInRz6bW1io0VJM1RYPudjq1f31csfR4BwZ4JZICBN5pFr8HgOFzjTz4Jtrbf/z/kY9L2GI+zOJSvk8vFB4Q==","repository":{"url":"git+https://github.com/beerush-id/airlib.git","type":"git"},"_npmVersion":"10.8.3","description":"Material Design 3 Headless Component Library CSS Theme","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"publint":"^0.3.0","@types/bun":"^1.3.0","@biomejs/biome":"^2.3.0","@tailwindcss/cli":"4.3.0"},"peerDependencies":{"tailwindcss":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/material_1.0.2_1781137950897_0.15579903339507806","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@airlib/material","version":"1.0.3","keywords":["material","design","m3","css","theme","tailwind","air-stack"],"author":"Nanang Mahdaen El Agung <mahdaen@gmail.com>","license":"MIT","_id":"@airlib/material@1.0.3","maintainers":[{"name":"mahdaen","email":"mahdaen@gmail.com"}],"bugs":{"url":"https://github.com/beerush-id/airlib/issues"},"dist":{"shasum":"d08b2901a252f691f58ab875db0d8ad2722b0513","tarball":"https://registry.npmjs.org/@airlib/material/-/material-1.0.3.tgz","fileCount":54,"integrity":"sha512-Jo86TkH07eglm74oy1/uXoM17amHxnQ7A2znrD+CfWH4ju2/RR6PYDvGvgsepMfC/Fj5xiSxVRz8QJnZhiJ5CA==","signatures":[{"sig":"MEUCIQDaefpTNZi7gt02ADTGHMzTky2mEho1nwe+Z1lEb78NxQIgFVaonw8ZT0rav9Vz33MpQTlXuu3aTyN60Z+6sqT9su4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":433801},"type":"module","shasum":"d08b2901a252f691f58ab875db0d8ad2722b0513","exports":{".":"./src/index.css","./*":"./src/*","./bundle":"./dist/index.css"},"scripts":{"build":"bun run build.ts","format":"biome format --write","prepublish":"bun run format"},"_npmUser":{"name":"mahdaen","email":"mahdaen@gmail.com"},"_integrity":"sha512-Jo86TkH07eglm74oy1/uXoM17amHxnQ7A2znrD+CfWH4ju2/RR6PYDvGvgsepMfC/Fj5xiSxVRz8QJnZhiJ5CA==","repository":{"url":"git+https://github.com/beerush-id/airlib.git","type":"git"},"_npmVersion":"10.8.3","description":"Material Design 3 Headless Component Library CSS Theme","directories":{},"sideEffects":false,"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"publint":"^0.3.0","@types/bun":"^1.3.0","@biomejs/biome":"^2.3.0","@tailwindcss/cli":"4.3.0"},"peerDependencies":{"tailwindcss":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/material_1.0.3_1781138017222_0.9183400412670142","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"type":"module","name":"@airlib/material","version":"1.0.4","description":"Material Design 3 Headless Component Library CSS Theme","keywords":["material","design","m3","css","theme","tailwind","air-stack"],"author":"Nanang Mahdaen El Agung <mahdaen@gmail.com>","repository":{"type":"git","url":"git+https://github.com/beerush-id/airlib.git"},"bugs":{"url":"https://github.com/beerush-id/airlib/issues"},"sideEffects":false,"exports":{".":"./src/index.css","./bundle":"./dist/index.css","./*":"./src/*"},"publishConfig":{"access":"public"},"devDependencies":{"@biomejs/biome":"^2.3.0","@tailwindcss/cli":"4.3.0","@types/bun":"^1.3.0","publint":"^0.3.0"},"peerDependencies":{"tailwindcss":">=4.0.0"},"scripts":{"build":"bun run build.ts","prepublish":"bun run format && bun run build","format":"biome format --write"},"license":"MIT","_id":"@airlib/material@1.0.4","_integrity":"sha512-0sO51yxd9gpe6i/oU6YhGYrdxiUlAoITFduw8bvGr8k6nOXU2PE7bcTTyVv5oUngRlHOQ0GtAB69BkGKjuUtNg==","_nodeVersion":"24.3.0","_npmVersion":"10.8.3","shasum":"4fbb4a4b8817b8593e3b299768f6fbdd98b32cdf","dist":{"integrity":"sha512-0sO51yxd9gpe6i/oU6YhGYrdxiUlAoITFduw8bvGr8k6nOXU2PE7bcTTyVv5oUngRlHOQ0GtAB69BkGKjuUtNg==","shasum":"4fbb4a4b8817b8593e3b299768f6fbdd98b32cdf","tarball":"https://registry.npmjs.org/@airlib/material/-/material-1.0.4.tgz","fileCount":54,"unpackedSize":435300,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCm3cK4ps5wywYqg5rwlIECrCpeFdtOsUfuATg2bFeGCwIgCOvQYBEO0cs+kDJRsG4bGQyekat/CPxTa+upZaVOdLI="}]},"_npmUser":{"name":"mahdaen","email":"mahdaen@gmail.com"},"directories":{},"maintainers":[{"name":"mahdaen","email":"mahdaen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/material_1.0.4_1781140279214_0.9960121701025169"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-10T07:04:07.268Z","modified":"2026-06-11T01:11:19.494Z","1.0.0":"2026-06-10T07:04:07.662Z","1.0.1":"2026-06-11T00:31:18.484Z","1.0.2":"2026-06-11T00:32:31.108Z","1.0.3":"2026-06-11T00:33:37.356Z","1.0.4":"2026-06-11T01:11:19.352Z"},"bugs":{"url":"https://github.com/beerush-id/airlib/issues"},"author":"Nanang Mahdaen El Agung <mahdaen@gmail.com>","license":"MIT","keywords":["material","design","m3","css","theme","tailwind","air-stack"],"repository":{"type":"git","url":"git+https://github.com/beerush-id/airlib.git"},"description":"Material Design 3 Headless Component Library CSS Theme","maintainers":[{"name":"mahdaen","email":"mahdaen@gmail.com"}],"readme":"# AIR M3\n\nBuilding a cohesive design system requires a robust set of modular styles. This package provides the foundational Material Design 3 CSS utilities required to build the `@airlib` component system. It leverages Tailwind CSS v4 to keep the footprint minimal, highly scalable, and completely free of JavaScript runtime styling overhead.\n\n## Getting Started\n\nIntegrating a new design system shouldn't require complex build steps or heavy runtime dependencies. This library is distributed as a standard npm package and is consumed purely via CSS imports.\n\n> [!IMPORTANT]\n> **Prerequisite:** This library strictly requires **Tailwind CSS v4** to be installed and configured in your project, as it leverages the new `@theme` and `@utility` CSS APIs.\n\n```bash\nnpm install @airlib/material\n```\n```css\n/* OPTION A (Preferred): Import theme/components AND default surface backgrounds */\n@import \"@airlib/material/index.css\";\n@import \"@airlib/material/default.css\";\n\n/* OPTION B: Import only the core theme and components (no default backgrounds) */\n@import \"@airlib/material/index.css\";\n\n/* Optionally, override the global brand color */\n:root {\n  --seed-color: oklch(60% 0.15 260);\n}\n```\n\nBy keeping the integration strictly at the CSS layer, your application remains completely agnostic to JavaScript frameworks while instantly inheriting the full Material Design 3 specification.\n\n## Core Theme & Utilities\n\nTo maintain visual consistency across an entire application, we must rely on a centralized theme configuration and shared utilities. These files define the base variables, typography scales, and global behaviors that all other components consume.\n\n- [src/default.css](src/default.css) - The main entry point that aggregates all theme tokens, layout structures, and component styles.\n- [src/theme/index.css](src/theme/index.css) - The core theme engine. It dynamically generates the full OKLCH color palette from a single seed color, and defines elevations, radii, and z-index layers.\n- [src/theme/typography.css](src/theme/typography.css) - The complete set of Material Design 3 typography scales (Display, Headline, Title, Body, Label).\n- [src/theme/state.css](src/theme/state.css) - Global state layer utilities (hover, focus, pressed) used to provide interactive feedback across all components.\n- [src/utilities/index.css](src/utilities/index.css) - General utility classes that don't fit into a specific component context.\n\nBy decoupling the design tokens from the components themselves, developers can safely re-theme the entire library simply by overriding the `--seed-color` variable at the root level.\n\n## Layout Elements\n\nStructuring the application shell is the first critical step in building a user interface. These modules provide the scaffolding necessary to frame your content gracefully across both mobile and desktop devices.\n\n- [src/layout/app-bar.css](src/layout/app-bar.css) - Top-level headers containing page titles, navigation icons, and primary actions.\n- [src/layout/navigation-bar.css](src/layout/navigation-bar.css) - Bottom navigation structures optimized for mobile and compact screens.\n- [src/layout/navigation-rail.css](src/layout/navigation-rail.css) - Vertical side navigation structures optimized for tablet and desktop environments.\n- [src/layout/navigation-drawer.css](src/layout/navigation-drawer.css) - Expandable side panels for deep navigation hierarchies.\n- [src/layout/bottom-sheet.css](src/layout/bottom-sheet.css) - Modal surfaces anchored to the bottom of the screen for secondary content.\n- [src/layout/side-sheet.css](src/layout/side-sheet.css) - Modal or persistent surfaces anchored to the edges of the screen.\n- [src/layout/tabs.css](src/layout/tabs.css) - Horizontal navigation elements for switching between related content views.\n- [src/layout/accordion.css](src/layout/accordion.css) - Vertically stacked panels that expand and collapse to reveal content.\n- [src/layout/carousel.css](src/layout/carousel.css) - Horizontally scrollable containers for browsing multiple items.\n\nUsing these layout utilities ensures that the application shell behaves responsively while strictly respecting the standardized z-index hierarchy and logical Right-to-Left (RTL) flow.\n\n## Interactive Components\n\nBuilding user interactions requires precise visual feedback and accessible touch targets. These files define the standalone UI elements that users interact with directly.\n\n- [src/components/button.css](src/components/button.css) - Core action triggers including Filled, Outlined, Text, Tonal, and Elevated variants.\n- [src/components/button-group.css](src/components/button-group.css) - Layout utilities for visually grouping multiple related buttons.\n- [src/components/icon-button.css](src/components/icon-button.css) - Compact action triggers focused solely on an icon.\n- [src/components/fab.css](src/components/fab.css) - Floating Action Buttons for promoting the primary action on a screen.\n- [src/components/fab-menu.css](src/components/fab-menu.css) - Speed dial extensions that expand from a FAB to reveal multiple actions.\n- [src/components/segmented-button.css](src/components/segmented-button.css) - Grouped toggles for selecting options from a closely related set.\n- [src/components/split-button.css](src/components/split-button.css) - Dual-action buttons containing a primary action and a trailing dropdown trigger.\n- [src/components/chip.css](src/components/chip.css) - Compact elements that represent inputs, attributes, or actions.\n- [src/components/text-field.css](src/components/text-field.css) - Input containers for entering and editing text.\n- [src/components/checkbox.css](src/components/checkbox.css) - Selection controls for picking multiple options from a list.\n- [src/components/radio.css](src/components/radio.css) - Selection controls for picking a single option from a list.\n- [src/components/switch.css](src/components/switch.css) - Toggles for explicitly turning features on or off.\n- [src/components/slider.css](src/components/slider.css) - Controls for making selections from a continuous or discrete range of values.\n- [src/components/select.css](src/components/select.css) - Dropdown inputs for selecting a value from a predefined list.\n- [src/components/search-bar.css](src/components/search-bar.css) - Specialized input containers optimized for search queries.\n- [src/components/date-picker.css](src/components/date-picker.css) - Calendar interfaces for selecting dates.\n- [src/components/time-picker.css](src/components/time-picker.css) - Interfaces for selecting specific times.\n- [src/components/color-picker.css](src/components/color-picker.css) - Interfaces for selecting colors.\n- [src/components/ripple.css](src/components/ripple.css) - Utility classes for the interactive ripple effect on press.\n\nAll interactive elements strictly enforce the 48x48 pixel minimum touch target requirement and implement clear, unclipped focus rings for keyboard accessibility.\n\n## Data Display & Feedback\n\nPresenting information clearly and keeping the user informed of system status is critical for a smooth user experience. These elements handle content framing and temporary notifications.\n\n- [src/components/card.css](src/components/card.css) - Surfaces for grouping related content and actions about a single subject.\n- [src/components/list.css](src/components/list.css) - Continuous, vertical indexes of text and images.\n- [src/components/table.css](src/components/table.css) - Segmented data tables for structured information.\n- [src/components/divider.css](src/components/divider.css) - Thin visual lines used to group or separate content.\n- [src/components/dialog.css](src/components/dialog.css) - High-priority modal surfaces that interrupt the user for critical decisions.\n- [src/components/menu.css](src/components/menu.css) - Transient lists of options that appear upon interaction.\n- [src/components/snackbar.css](src/components/snackbar.css) - Brief, temporary messages displayed at the bottom of the screen.\n- [src/components/tooltip.css](src/components/tooltip.css) - Informational labels that appear on hover or focus.\n- [src/components/badge.css](src/components/badge.css) - Small indicators used to notify users of new or unread content.\n- [src/components/progress.css](src/components/progress.css) - Linear and circular indicators that visualize the status of ongoing operations.\n\n## Extensions\n\nPowerful utilities and components extending beyond the base M3 specification for modern web applications.\n\n- [src/extensions/masonry.css](src/extensions/masonry.css) - A pure CSS multi-column masonry grid layout.\n- [src/extensions/skeleton.css](src/extensions/skeleton.css) - Universal skeleton loading utilities. Use `.skeleton` for standalone elements or `.skeleton-group` to recursively transform an entire container's text and inline blocks into shimmering placeholders.\n- [src/extensions/ai.css](src/extensions/ai.css) - Specialized components for Conversational UI, including asymmetric chat bubbles, multiline prompt fields, and CSS-only streaming/thinking indicators.\n\nBy relying on these standardized display components, the interface remains consistent and predictable, minimizing cognitive load for the user while they interact with the application.\n","readmeFilename":"README.md"}