{"_id":"@auliyapal/minimalis-ui-system","name":"@auliyapal/minimalis-ui-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@auliyapal/minimalis-ui-system","publishConfig":{"access":"public"},"version":"1.0.0","description":"Minimalis UI Design System - Dark Blue Theme","main":"dist/index.cjs","module":"dist/index.js","type":"module","scripts":{"build":"npx tsup"},"license":"MIT","gitHead":"79e6a99ce50bdae2879157f47a9fb549ec06aa55","_id":"@auliyapal/minimalis-ui-system@1.0.0","_nodeVersion":"22.20.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-qHRMqvgQqp4PvETMOapIIMnBzMsAwbbb7No0WiiYV+FAEii5DMiNZJx1IXF0nMUs9GBwolL6afAaoBoBLVDu/Q==","shasum":"2bfb7fccbf172da594e334a253f7941872e93d3d","tarball":"https://registry.npmjs.org/@auliyapal/minimalis-ui-system/-/minimalis-ui-system-1.0.0.tgz","fileCount":4,"unpackedSize":10759,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCFlR+zSwgOjws/bT6KdEwYPQUxLkiEuMJ99TWS0RkJLAIgA1zVBkImo8VrE+ovnMrk6GSv1Pik4bQB8fx6zCRLrIU="}]},"_npmUser":{"name":"auliyapal","email":"auliyafahri58@gmail.com"},"directories":{},"maintainers":[{"name":"auliyapal","email":"auliyafahri58@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/minimalis-ui-system_1.0.0_1769159481193_0.9480691760447548"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-23T09:11:21.112Z","1.0.0":"2026-01-23T09:11:21.327Z","modified":"2026-01-23T09:11:21.542Z"},"maintainers":[{"name":"auliyapal","email":"auliyafahri58@gmail.com"}],"description":"Minimalis UI Design System - Dark Blue Theme","license":"MIT","readme":"# 🎨 Minimalis UI System\r\n\r\nSebuah **Design System berbasis JavaScript (Vanilla JS)** dengan konsep **minimalis modern** dan **tema Dark Blue & Black**, dibuat untuk memenuhi **Tugas UAS Design System**.\r\n\r\nProject ini berisi kumpulan **komponen UI reusable** yang sederhana, konsisten, dan mudah dikembangkan tanpa framework tambahan.\r\n\r\n---\r\n\r\n## 📌 Identitas Proyek\r\n\r\n* **Nama Proyek** : Minimalis UI System\r\n* **Mata Kuliah** : Design System\r\n* **Jenis Tugas** : UAS\r\n* **Teknologi** : Vanilla JavaScript + HTML + CSS (inline style)\r\n* **Build Tool** : `tsup`\r\n\r\n---\r\n\r\n## ✨ Fitur Utama\r\n\r\n* 🎯 Desain **minimalis & konsisten**\r\n* 🌙 Tema warna **Dark Blue & Hitam**\r\n* ♻️ Komponen **reusable**\r\n* ⚡ Tanpa framework (React/Vue)\r\n* 📦 Build siap distribusi (`dist/`)\r\n\r\n---\r\n\r\n## 🧩 Komponen UI\r\n\r\nProject ini memiliki **5 komponen utama**:\r\n\r\n1. **Button**\r\n   Tombol utama dengan gaya modern dan hover effect.\r\n\r\n2. **Input**\r\n   Field input dengan border halus dan warna gelap.\r\n\r\n3. **Card**\r\n   Container konten dengan judul dan deskripsi.\r\n\r\n4. **Alert**\r\n   Notifikasi sukses dengan warna kontras.\r\n\r\n5. **Badge**\r\n   Label status berbentuk pill.\r\n\r\n---\r\n\r\n## 🎨 Tema Warna\r\n\r\n| Elemen           | Warna     |\r\n| ---------------- | --------- |\r\n| Background utama | `#020617` |\r\n| Biru utama       | `#2563eb` |\r\n| Biru hover       | `#1d4ed8` |\r\n| Teks utama       | `#f8fafc` |\r\n| Teks sekunder    | `#cbd5f5` |\r\n| Border           | `#1e293b` |\r\n\r\n---\r\n\r\n## 📂 Struktur Folder\r\n\r\n```bash\r\nminimalis-ui-system/\r\n├── src/\r\n│   ├── components/\r\n│   │   ├── Button.js\r\n│   │   ├── Input.js\r\n│   │   ├── Card.js\r\n│   │   ├── Alert.js\r\n│   │   └── Badge.js\r\n│   └── index.js\r\n├── dist/\r\n│   ├── index.js\r\n│   └── index.cjs\r\n├── demo.html\r\n├── tsup.config.js\r\n├── package.json\r\n└── README.md\r\n```\r\n\r\n---\r\n\r\n## 🚀 Cara Menjalankan Project\r\n\r\n### 1️⃣ Install Dependencies\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n### 2️⃣ Build Project\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nOutput build akan tersedia di folder `dist/`.\r\n\r\n---\r\n\r\n## 👀 Cara Melihat Tampilan (Demo)\r\n\r\nBuka file berikut langsung di browser:\r\n\r\n```bash\r\ndemo.html\r\n```\r\n\r\nFile ini menampilkan seluruh komponen UI dengan tema Dark Blue secara visual.\r\n\r\n---\r\n\r\n## 🧪 Contoh Penggunaan\r\n\r\n```js\r\nimport { Button, Input, Card, Alert, Badge } from \"./dist/index.js\";\r\n\r\nconst container = document.createElement(\"div\");\r\ncontainer.append(\r\n  Button({ label: \"Primary Button\" }),\r\n  Input({ placeholder: \"Nama pengguna\" }),\r\n  Card({\r\n    title: \"Design System\",\r\n    content: \"Tema biru hitam minimalis\"\r\n  }),\r\n  Alert({ message: \"Data berhasil disimpan\" }),\r\n  Badge({ label: \"ACTIVE\" })\r\n);\r\n\r\ndocument.body.append(container);\r\n```\r\n\r\n---\r\n\r\n## 📚 Tujuan Pembelajaran\r\n\r\n* Memahami konsep **Design System**\r\n* Menerapkan **konsistensi visual**\r\n* Membuat komponen UI reusable\r\n* Menggunakan build tool modern (`tsup`)\r\n\r\n---\r\n\r\n## 📝 Catatan\r\n\r\n* Project ini dibuat **tanpa framework** untuk fokus pada konsep dasar.\r\n* Semua styling menggunakan JavaScript agar mudah dikembangkan.\r\n\r\n---\r\n\r\n## 🙌 Penutup\r\n\r\nTerima kasih telah melihat project ini. Semoga project **Minimalis UI System** dapat menjadi contoh sederhana namun rapi dalam penerapan Design System.\r\n\r\n✨ Dibuat dengan penuh semangat belajar ✨\r\n","readmeFilename":"README.md","_rev":"1-aca66600bd408466a5510237a6d8f292"}