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

package/src/webview/bottomsheet/AI_GUIDE.md

@@ -0,0 +1,141 @@
+# <BottomSheet /> — TTDK Component Reference
+
+BottomSheet — Komponen lembar geser bawah ramah sentuhan (touch-friendly) untuk in-app webview & mobile. Mendukung safe-area-inset perangkat mobile, gesture swipe-down to dismiss, header, footer, dan mode iOS / Material.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/webview/bottomsheet/bottomsheet.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import BottomSheet from "@ttdk-design-system/library-react/webview/bottomsheet";
+
+// Vue 3
+import BottomSheet from "@ttdk-design-system/library-vue/webview/bottomsheet";
+
+// Svelte
+import BottomSheet from "@ttdk-design-system/library-svelte/webview/bottomsheet";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+
+### Sub-interface: `BottomSheetProps`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `open?` | `boolean` | `-` | Status visibilitas bottom sheet (mode controlled). Mendukung `v-model:open` / `v-model` pada Vue dan controlled prop `open` pada React. |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal bottom sheet saat pertama kali dimuat (uncontrolled initial state). |
+| `title?` | `string` | `-` | Judul teks di bagian header bottom sheet. |
+| `description?` | `string` | `-` | Deskripsi penjelasan di bagian header di bawah judul. |
+| `height?` | `BottomSheetHeight` | `auto` | Skala ukuran tinggi bottom sheet: - `'auto'`: Menyesuaikan tinggi isi konten (maksimal 90vh). - `'sm'`: Lembar ringkas (~35% tinggi layar). - `'md'`: Lembar proporsional standar (~55% tinggi layar). - `'lg'`: Lembar luas (~85% tinggi layar). - `'full'`: Tampilan penuh (100% tinggi layar). |
+| `maxHeight?` | `string` | `-` | Batas tinggi maksimum lembar sheet (contoh: '90vh', '600px'). |
+| `mode?` | `BottomSheetMode` | `auto` | Cita rasa / gaya platform mobile: - `'auto'`: Desain netral adaptif khas TTDK Design System. - `'ios'`: Cita rasa Apple Human Interface (frosted glass, sudut kurva halus 20px). - `'material'`: Cita rasa Material Design 3 (sudut 28px, elevated shadow). |
+| `handle?` | `boolean` | `true` | Menampilkan bilah pegangan geser (drag handle indicator) di bagian atas lembar. |
+| `swipeable?` | `boolean` | `true` | Mengaktifkan gestur sentuh geser ke bawah (swipe-down) untuk menutup lembar. |
+| `close?` | `boolean` | `false` | Menampilkan tombol tutup 'X' di pojok kanan atas header. |
+| `closeIcon?` | `any` | `-` | Ikon kustom untuk tombol tutup. |
+| `dismissible?` | `boolean` | `true` | Mengizinkan lembar ditutup saat pengguna mengeklik backdrop overlay atau menekan tombol Escape. |
+| `preventClose?` | `boolean` | `false` | Mencegah lembar ditutup saat klik di luar atau saat digeser (prevent close). Jika bernilai `true`, lembar hanya dapat ditutup via aksi eksplisit. |
+| `overlay?` | `boolean` | `true` | Menampilkan lapisan latar belakang redup (backdrop overlay). |
+| `preventScroll?` | `boolean` | `true` | Mengunci scrolling pada halaman web di latar belakang saat lembar terbuka (body scroll lock). |
+| `header?` | `any` | `-` | Konten kustom untuk bagian header lembar. |
+| `body?` | `any` | `-` | Konten kustom untuk bagian isi utama (body) lembar. |
+| `footer?` | `any` | `-` | Konten kustom untuk bagian footer aksi di bawah lembar (misal: tombol konfirmasi / CTA). |
+| `content?` | `any` | `-` | Penggantian seluruh konten lembar (mengabaikan layout header, body, footer bawaan). |
+| `children?` | `any` | `-` | Konten utama lembar bottom sheet (body content). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah (standar React). |
+| `onUpdateOpen?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah untuk two-way binding `v-model:open` (Vue). |
+| `onOpen?` | `() => void` | `-` | Callback event saat lembar bottom sheet terbuka. |
+| `onClose?` | `() => void` | `-` | Callback event saat lembar bottom sheet ditutup. |
+| `onClosePrevent?` | `() => void` | `-` | Callback event saat pengguna mencoba menutup lembar tetapi dicegah karena `preventClose={true}`. |
+| `ui?` | `BottomSheetUiProps` | `-` | Kustomisasi visual granular pada elemen root melalui style-like object. |
+| `className?` | `string` | `-` |  |
+| `overlayClass?` | `string` | `-` |  |
+| `overlayStyle?` | `any` | `-` |  |
+| `contentClass?` | `string` | `-` |  |
+| `contentStyle?` | `any` | `-` |  |
+| `headerClass?` | `string` | `-` |  |
+| `headerStyle?` | `any` | `-` |  |
+| `bodyClass?` | `string` | `-` |  |
+| `bodyStyle?` | `any` | `-` |  |
+| `footerClass?` | `string` | `-` |  |
+| `footerStyle?` | `any` | `-` |  |
+| `handleClass?` | `string` | `-` |  |
+| `handleStyle?` | `any` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from 'react';
+import { BottomSheet } from "@ttdk-design-system/library-react/webview/bottomsheet";
+import "@ttdk-design-system/library-react/webview/bottomsheet/bottomsheet.css";
+
+export function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setOpen(true)}>Buka Bottom Sheet</button>
+      <BottomSheet
+        open={open}
+        title="Konfirmasi Tindakan Medis"
+        description="Pastikan data pasien dan resep obat sudah sesuai"
+        onClose={() => setOpen(false)}
+      >
+        <p>Konten rincian pemeriksaan pasien dalam webview.</p>
+      </BottomSheet>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BottomSheet } from "@ttdk-design-system/library-vue/webview/bottomsheet";
+import "@ttdk-design-system/library-vue/webview/bottomsheet/bottomsheet.css";
+
+const open = ref(false);
+</script>
+
+<template>
+  <div>
+    <button @click="open = true">Buka Bottom Sheet</button>
+    <BottomSheet
+      v-model:open="open"
+      title="Konfirmasi Tindakan Medis"
+      description="Pastikan data pasien dan resep obat sudah sesuai"
+    >
+      <p>Konten rincian pemeriksaan pasien dalam webview.</p>
+    </BottomSheet>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import { BottomSheet } from "@ttdk-design-system/library-svelte/webview/bottomsheet";
+  import "@ttdk-design-system/library-svelte/webview/bottomsheet/bottomsheet.css";
+
+  let open = false;
+</script>
+
+<div>
+  <button on:click={() => open = true}>Buka Bottom Sheet</button>
+  <BottomSheet
+    open={open}
+    title="Konfirmasi Tindakan Medis"
+    description="Pastikan data pasien dan resep obat sudah sesuai"
+    onClose={() => open = false}
+  >
+    <p>Konten rincian pemeriksaan pasien dalam webview.</p>
+  </BottomSheet>
+</div>
+```

package/src/webview/bottomsheet/bottomsheet.css

@@ -0,0 +1 @@
+.ttdk-bottomsheet-portal{z-index:1000;pointer-events:none;font-family:var(--ttdk-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}.ttdk-bottomsheet-overlay{z-index:1000;pointer-events:auto;background-color:var(--ttdk-bg-overlay,#14131380);animation:.25s ease-out forwards ttdk-bottomsheet-fade-in;position:fixed;inset:0}.ttdk-bottomsheet-portal[data-mode=ios] .ttdk-bottomsheet-overlay{-webkit-backdrop-filter:blur(8px)}.ttdk-bottomsheet-sheet{z-index:1001;pointer-events:auto;background-color:var(--ttdk-bg-base-primary,#fff);width:100%;color:var(--ttdk-text-icon-primary,#141313);box-shadow:var(--ttdk-shadow-lg,0px -4px 20px #00000026);box-sizing:border-box;padding-bottom:max(16px, env(safe-area-inset-bottom,16px));border-top-left-radius:20px;border-top-right-radius:20px;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1);animation:.32s cubic-bezier(.16,1,.3,1) forwards ttdk-bottomsheet-slide-up;display:flex;position:relative;overflow:hidden}.ttdk-bottomsheet-sheet.ttdk-bottomsheet-anim-done{animation:none!important}.ttdk-bottomsheet-sheet[data-dragging=true]{cursor:grabbing!important;transition:none!important;animation:none!important}.ttdk-bottomsheet-sheet[data-dragging=true] *{-webkit-user-select:none!important;user-select:none!important}.ttdk-bottomsheet-sheet.ttdk-bottomsheet-closing{transition:transform .22s cubic-bezier(.16,1,.3,1)!important;animation:none!important;transform:translateY(100%)!important}.ttdk-bottomsheet-portal.ttdk-bottomsheet-closing .ttdk-bottomsheet-overlay{opacity:0;transition:opacity .2s ease-out}.ttdk-bottomsheet-sheet[data-mode=ios]{border-top-left-radius:22px;border-top-right-radius:22px}.ttdk-bottomsheet-sheet[data-mode=material]{border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:0 8px 36px #0000003d}.ttdk-bottomsheet-sheet[data-height=auto]{max-height:90vh}.ttdk-bottomsheet-sheet[data-height=sm]{height:35vh;max-height:40vh}.ttdk-bottomsheet-sheet[data-height=md]{height:55vh;max-height:60vh}.ttdk-bottomsheet-sheet[data-height=lg]{height:85vh;max-height:90vh}.ttdk-bottomsheet-sheet[data-height=full]{border-top-left-radius:0;border-top-right-radius:0;height:100vh;max-height:100vh}.ttdk-bottomsheet-handle-wrapper{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;padding-top:12px;padding-bottom:8px;display:flex}.ttdk-bottomsheet-handle-wrapper:active,.ttdk-bottomsheet-sheet[data-dragging=true] .ttdk-bottomsheet-handle-wrapper{cursor:grabbing}.ttdk-bottomsheet-handle{background-color:var(--ttdk-border-subtle,#d1d5db);border-radius:9999px;width:36px;height:4.5px;transition:background-color .2s,transform .15s}.ttdk-bottomsheet-handle-wrapper:active .ttdk-bottomsheet-handle,.ttdk-bottomsheet-sheet[data-dragging=true] .ttdk-bottomsheet-handle{background-color:var(--ttdk-color-neutral-400,#9ca3af);transform:scaleX(1.15)}.ttdk-bottomsheet-sheet[data-mode=material] .ttdk-bottomsheet-handle{width:32px;height:4px}.ttdk-bottomsheet-header{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-bottom:1px solid #0000;justify-content:space-between;align-items:flex-start;gap:16px;padding:8px 20px 12px;display:flex}.ttdk-bottomsheet-header:active,.ttdk-bottomsheet-sheet[data-dragging=true] .ttdk-bottomsheet-header{cursor:grabbing}.ttdk-bottomsheet-header-info{flex:1;min-width:0}.ttdk-bottomsheet-title{color:var(--ttdk-text-icon-primary,#141313);margin:0;font-size:18px;font-weight:600;line-height:1.4}.ttdk-bottomsheet-description{color:var(--ttdk-text-icon-secondary,#6b7280);margin:4px 0 0;font-size:14px;line-height:1.45}.ttdk-bottomsheet-close{width:32px;height:32px;color:var(--ttdk-text-icon-secondary,#6b7280);cursor:pointer;background:0 0;border:none;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex}.ttdk-bottomsheet-close svg{stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.ttdk-bottomsheet-close:hover{background-color:var(--ttdk-bg-secondary-hover,#0000000d);color:var(--ttdk-text-icon-primary,#141313)}.ttdk-bottomsheet-close:active{background-color:var(--ttdk-bg-secondary-active,#0000001a)}.ttdk-bottomsheet-body{-webkit-overflow-scrolling:touch;color:var(--ttdk-text-icon-primary,#141313);flex:auto;padding:8px 20px 16px;font-size:15px;line-height:1.5;overflow-y:auto}.ttdk-bottomsheet-footer{border-top:1px solid var(--ttdk-border-subtle,#f3f4f6);flex-shrink:0;align-items:center;gap:12px;padding:12px 20px 0;display:flex}.ttdk-bottomsheet-shake{animation:.35s ease-in-out ttdk-bottomsheet-bounce}.dark .ttdk-bottomsheet-sheet,[data-theme=dark] .ttdk-bottomsheet-sheet{background-color:var(--ttdk-bg-base-primary,#18181b);color:var(--ttdk-text-icon-primary,#f4f4f5);box-shadow:0 -4px 24px #00000073}.dark .ttdk-bottomsheet-handle,[data-theme=dark] .ttdk-bottomsheet-handle{background-color:var(--ttdk-border-subtle,#3f3f46)}.dark .ttdk-bottomsheet-title,[data-theme=dark] .ttdk-bottomsheet-title{color:var(--ttdk-text-icon-primary,#f4f4f5)}.dark .ttdk-bottomsheet-description,[data-theme=dark] .ttdk-bottomsheet-description{color:var(--ttdk-text-icon-secondary,#a1a1aa)}.dark .ttdk-bottomsheet-body,[data-theme=dark] .ttdk-bottomsheet-body{color:var(--ttdk-text-icon-primary,#f4f4f5)}.dark .ttdk-bottomsheet-footer,[data-theme=dark] .ttdk-bottomsheet-footer{border-top-color:var(--ttdk-border-subtle,#27272a)}.dark .ttdk-bottomsheet-close:hover,[data-theme=dark] .ttdk-bottomsheet-close:hover{color:#f4f4f5;background-color:#ffffff14}@keyframes ttdk-bottomsheet-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ttdk-bottomsheet-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes ttdk-bottomsheet-bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(-2px)}}