{"_id":"@achmadalimin/ui","_rev":"2-cdb4aa5da319d40914d75927f2215b2f","name":"@achmadalimin/ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@achmadalimin/ui","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@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/issues"},"dist":{"shasum":"864a986862c12b2227a348e5a5212f0d8517ef17","tarball":"https://registry.npmjs.org/@achmadalimin/ui/-/ui-0.1.0.tgz","fileCount":6,"integrity":"sha512-M/UkW6fF2dabCU8S4hK/yunllP0jUZB++rISbmEMZMbfKlI7c9P08N1FsIEVzcZrcF9O65bEZY7rF63wQPYMaQ==","signatures":[{"sig":"MEUCIAvR9rJGK3QUJXVxSJr2JPiPMaE2HAmZx8CrrPdoSZkmAiEAtizq6DQ5HM/xQyS8LXsCUPtxIdfcE+GYXG9iB8yOO64=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":112445},"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.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_0.1.0_1780126586077_0.993866631453892","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to @achmadalimin/ui-kit — please install @achmadalimin/ui-kit instead"}},"time":{"created":"2026-05-30T07:36:25.963Z","modified":"2026-05-30T07:42:26.296Z","0.1.0":"2026-05-30T07:36:26.209Z"},"bugs":{"url":"https://github.com/merahburam/achmadalimin-ui/issues"},"author":{"url":"https://achmadalimin.com","name":"Achmad Alimin","email":"contact@achmadalimin.com"},"license":"MIT","homepage":"https://achmadalimin.com/design-system","keywords":["design-system","css","ui","components","design-tokens"],"repository":{"url":"git+https://github.com/merahburam/achmadalimin-ui.git","type":"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\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\"`) are planned\n> but not yet included.\n\n## Install\n\n```bash\nnpm install @achmadalimin/ui\n```\n\n## Usage\n\nImport the bundled stylesheet once at your app entry point:\n\n```js\nimport \"@achmadalimin/ui/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/tokens.css\";          // optional — the design primitives\nimport \"@achmadalimin/ui/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 · Tabs · 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"}