{"_id":"@achmadalimin/ui-kit","_rev":"2-77c7fa366c5fbdd5011600b6ba104913","name":"@achmadalimin/ui-kit","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@achmadalimin/ui-kit","version":"0.1.0","keywords":["design-system","css","ui","components","design-tokens"],"author":{"url":"https://achmadalimin.com","name":"Achmad Alimin","email":"contact@achmadalimin.com"},"license":"MIT","_id":"@achmadalimin/ui-kit@0.1.0","maintainers":[{"name":"achmadalimin","email":"achmad.alimin29@gmail.com"}],"homepage":"https://achmadalimin.com/design-system","bugs":{"url":"https://github.com/merahburam/achmadalimin-ui-kit/issues"},"dist":{"shasum":"424bc05375c1b266a3d5b214932ba61764e707d6","tarball":"https://registry.npmjs.org/@achmadalimin/ui-kit/-/ui-kit-0.1.0.tgz","fileCount":6,"integrity":"sha512-S+ZUvsHjEp99gS5G+ZlFI9ia2oLwGSST0fwj1MyEp0LyBSRxspFFx9kYuBroHK2HiqRmzqsgwqn1WvXAFbUibQ==","signatures":[{"sig":"MEUCIDdIEROQhdmM5jLnSr82+U6HHWHP+Xc6RXUjEN+Vcs66AiEAmXIrZpHonlQ4wA/hUe+QILNkS4PFJxz8TrXlz5gMjyY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":112481},"type":"module","exports":{"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json","./design-system.css":"./dist/design-system.css"},"gitHead":"03de863fd8d18a129d1931d2518ccb90de030656","scripts":{"build":"node scripts/sync-css.mjs","prepublishOnly":"npm run build"},"_npmUser":{"name":"achmadalimin","email":"achmad.alimin29@gmail.com"},"repository":{"url":"git+https://github.com/merahburam/achmadalimin-ui-kit.git","type":"git"},"_npmVersion":"10.9.8","description":"Design system styles by Achmad Alimin — CSS tokens and component classes (ui-btn, ui-modal, ui-tabs, …). CSS-only; React components coming later.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.22.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui-kit_0.1.0_1780126932796_0.07238137009789636","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@achmadalimin/ui-kit","version":"0.2.0","description":"Design system styles by Achmad Alimin — CSS tokens and component classes (ui-btn, ui-modal, ui-tabs, …). CSS-only; React components coming later.","type":"module","license":"MIT","author":{"name":"Achmad Alimin","email":"contact@achmadalimin.com","url":"https://achmadalimin.com"},"homepage":"https://achmadalimin.com/design-system","repository":{"type":"git","url":"git+https://github.com/merahburam/achmadalimin-ui-kit.git"},"keywords":["design-system","css","ui","components","design-tokens"],"sideEffects":["*.css"],"exports":{"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./design-system.css":"./dist/design-system.css","./package.json":"./package.json"},"scripts":{"build":"node scripts/sync-css.mjs","prepublishOnly":"npm run build"},"publishConfig":{"access":"public"},"_id":"@achmadalimin/ui-kit@0.2.0","gitHead":"02ef1c6ff235fd299ddcd460e0ec8d2572220ba0","bugs":{"url":"https://github.com/merahburam/achmadalimin-ui-kit/issues"},"_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-P2razP9xQoHYM7jFh+h3J3/ng7BxJSyF5HLQcFYtZKa4GrKdP9ZFrjfPFf5j9bONrozzJhJDdZIhORq3zIkedA==","shasum":"3d8693a93cdfceac4f3c13739f14812f1df952ff","tarball":"https://registry.npmjs.org/@achmadalimin/ui-kit/-/ui-kit-0.2.0.tgz","fileCount":6,"unpackedSize":121738,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIZoqZGkDpxolQjordVHrnGm6EEWYwJf8XRkCDTjt/VAIhAIsoHivKCsWYxDIkw+g3Ob4Z3vgk4waLZ8AoG3AMKtGh"}]},"_npmUser":{"name":"achmadalimin","email":"achmad.alimin29@gmail.com"},"directories":{},"maintainers":[{"name":"achmadalimin","email":"achmad.alimin29@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-kit_0.2.0_1780753595109_0.057794170098692144"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-30T07:42:12.630Z","modified":"2026-06-06T13:46:35.377Z","0.1.0":"2026-05-30T07:42:12.934Z","0.2.0":"2026-06-06T13:46:35.246Z"},"bugs":{"url":"https://github.com/merahburam/achmadalimin-ui-kit/issues"},"author":{"name":"Achmad Alimin","email":"contact@achmadalimin.com","url":"https://achmadalimin.com"},"license":"MIT","homepage":"https://achmadalimin.com/design-system","keywords":["design-system","css","ui","components","design-tokens"],"repository":{"type":"git","url":"git+https://github.com/merahburam/achmadalimin-ui-kit.git"},"description":"Design system styles by Achmad Alimin — CSS tokens and component classes (ui-btn, ui-modal, ui-tabs, …). CSS-only; React components coming later.","maintainers":[{"name":"achmadalimin","email":"achmad.alimin29@gmail.com"}],"readme":"# @achmadalimin/ui-kit\n\nDesign system styles by [Achmad Alimin](https://achmadalimin.com/design-system) —\nCSS design tokens and component classes (`ui-btn`, `ui-modal`, `ui-tabs`, and more).\n\n> **CSS-only today.** This package ships stylesheets you use with plain HTML class\n> names. React components (`import { Modal } from \"@achmadalimin/ui-kit\"`) are planned\n> but not yet included.\n\n## Install\n\n```bash\nnpm install @achmadalimin/ui-kit\n```\n\n## Usage\n\nImport the bundled stylesheet once at your app entry point:\n\n```js\nimport \"@achmadalimin/ui-kit/styles.css\";\n```\n\nThen use the component classes in your markup:\n\n```html\n<button class=\"ui-btn ui-btn--primary\">Save</button>\n\n<div class=\"ui-modal-overlay open\">\n  <div class=\"ui-modal\" role=\"dialog\" aria-modal=\"true\">\n    <p class=\"ui-modal-title\">Modal title</p>\n    <p class=\"ui-modal-body\">Modal content goes here.</p>\n    <div class=\"ui-modal-actions\">\n      <button class=\"ui-modal-btn ui-modal-btn--cancel\">Cancel</button>\n      <button class=\"ui-modal-btn ui-modal-btn--confirm\">Confirm</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bring your own tokens\n\nIf you already define `--color-*` primitives, import only the component layer:\n\n```js\nimport \"@achmadalimin/ui-kit/tokens.css\";          // optional — the design primitives\nimport \"@achmadalimin/ui-kit/design-system.css\";   // component classes\n```\n\n## Theming\n\nDark mode is the default. Light mode activates via `data-theme=\"light\"` on `<html>`:\n\n```html\n<html data-theme=\"light\">\n```\n\nAll colors, spacing, and radii are CSS custom properties — override them in your\nown stylesheet to retheme.\n\n## Components\n\nAccordion · Badge · Banner · Button · Card · Input · Modal · Pager · Tabs · Toggle · Tooltip\n\nSee the full reference at **[achmadalimin.com/design-system](https://achmadalimin.com/design-system)**.\n\n## License\n\nMIT © Achmad Alimin\n","readmeFilename":"README.md"}