@ttdk-design-system/library-vue 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,105 @@
-# Temporary Holding Version
+# @ttdk-design-system/library-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Official Vue 3 component library for **TTDK Design System**, developed for the Digital Transformation Office (DTO) Kementerian Kesehatan Republik Indonesia (SATUSEHAT ecosystem).
+
+Built with Mitosis for seamless cross-framework consistency, `v-model` reactivity, strong TypeScript typings, and mobile webview readiness.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @ttdk-design-system/library-vue
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import Design Tokens (CSS)
+
+Import the base design tokens (colors, typography, radii, spacing) in your application entry file (e.g., `main.ts` or `App.vue`):
+
+```typescript
+import "@ttdk-design-system/library-vue/theme/tokens.css";
+```
+
+### 2. Import Component Stylesheets & Components
+
+Each component comes with modular styling for optimal bundle sizes:
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Button from "@ttdk-design-system/library-vue/web/button";
+import "@ttdk-design-system/library-vue/web/button/button.css";
+
+import Input from "@ttdk-design-system/library-vue/web/input";
+import "@ttdk-design-system/library-vue/web/input/input.css";
+
+import BottomSheet from "@ttdk-design-system/library-vue/webview/bottomsheet";
+import "@ttdk-design-system/library-vue/webview/bottomsheet/bottomsheet.css";
+
+const sheetOpen = ref(false);
+const name = ref("");
+</script>
+
+<template>
+  <div style="padding: 24px; display: flex; flex-direction: column; gap: 16px;">
+    <Input
+      v-model="name"
+      label="Nama Pasien"
+      placeholder="Masukkan nama lengkap"
+    />
+
+    <Button variant="primary" @click="sheetOpen = true">
+      Buka Detail (BottomSheet)
+    </Button>
+
+    <BottomSheet
+      v-model:open="sheetOpen"
+      mode="auto"
+      height="md"
+      title="Detail Rekam Medis"
+      description="Hasil pemeriksaan laboratorium pasien"
+      close
+    >
+      <p>
+        Halo, {{ name || "Pasien" }}! Data medis Anda telah terverifikasi di
+        SATUSEHAT.
+      </p>
+    </BottomSheet>
+  </div>
+</template>
+```
+
+---
+
+## 📱 Modules
+
+TTDK Design System is split into two specialized modules:
+
+1. **`web`**: Components designed for desktop & mobile responsive web applications (Accordion, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, Chip, Dropdown, Modal, Pagination, Popover, Selectbox, Sonner, Table, Tabs, Text, Textarea, Tooltip).
+2. **`webview`**: Components optimized for mobile in-app webviews (e.g., SATUSEHAT Mobile), featuring native Apple HIG & Material 3 aesthetics, notch safe-area insets, swipe gestures, and pull-to-dismiss behavior (BottomSheet, ButtonIos, ButtonMaterial).
+
+---
+
+## 🎨 Tailwind CSS Integration
+
+Include the TTDK preset in your `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  presets: [require("@ttdk-design-system/library-vue/tailwind-preset.cjs")],
+  content: [
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./node_modules/@ttdk-design-system/library-vue/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+};
+```
+
+---
+
+## 📄 License
+
+MIT &copy; DTO Kementerian Kesehatan Republik Indonesia.