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

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)}}

package/src/webview/bottomsheet/bottomsheet.vue

@@ -0,0 +1,441 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen || isClosing"
+      ref="rootRef"
+      role="dialog"
+      aria-modal="true"
+      :class="['ttdk-bottomsheet-portal', isClosing ? 'ttdk-bottomsheet-closing' : '', className || '', $attrs.class]"
+      :data-mode="mode || 'auto'"
+      :tabIndex="-1"
+      :style="{
+        ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+      }"
+    >
+      <!-- Backdrop Overlay -->
+      <div
+        v-if="overlay !== false"
+        :class="['ttdk-bottomsheet-overlay', overlayClass || '']"
+        :style="{
+          opacity: isDragging && dragOffset > 0 ? Math.max(0.15, 1 - dragOffset / 350) : undefined,
+          ...buildUiVars(overlayStyle),
+        }"
+        @click="handleOverlayClick"
+      />
+
+      <!-- Bottom Sheet Card -->
+      <div
+        ref="sheetRef"
+        :class="[
+          'ttdk-bottomsheet-sheet',
+          isAnimDone ? 'ttdk-bottomsheet-anim-done' : '',
+          isClosing ? 'ttdk-bottomsheet-closing' : '',
+          isShaking ? 'ttdk-bottomsheet-shake' : '',
+          contentClass || ''
+        ].filter(Boolean).join(' ').trim()"
+        :data-height="height || 'auto'"
+        :data-mode="mode || 'auto'"
+        :data-dragging="isDragging ? 'true' : undefined"
+        :style="{
+          maxHeight: maxHeight || undefined,
+          transform: isClosing
+            ? 'translateY(100%)'
+            : isDragging && dragOffset !== 0
+            ? 'translateY(' + Math.max(0, dragOffset) + 'px)'
+            : undefined,
+          ...buildUiVars(contentStyle),
+        }"
+      >
+        <!-- Drag Handle Indicator -->
+        <div
+          v-if="handle !== false"
+          :class="['ttdk-bottomsheet-handle-wrapper', handleClass || '']"
+          :style="{
+            ...buildUiVars(handleStyle),
+          }"
+          @pointerdown="handleDragStart"
+          @pointermove="handleDragMove"
+          @pointerup="handleDragEnd"
+          @touchstart="handleDragStart"
+          @touchmove="handleDragMove"
+          @touchend="handleDragEnd"
+        >
+          <div class="ttdk-bottomsheet-handle" aria-hidden="true" />
+        </div>
+
+        <!-- Custom Content Override Slot -->
+        <slot name="content" :close="() => closeSheet(true)">
+          <!-- Header -->
+          <div
+            v-if="hasHeader"
+            :class="['ttdk-bottomsheet-header', headerClass || '']"
+            :style="{
+              ...buildUiVars(headerStyle),
+            }"
+            @pointerdown="handleDragStart"
+            @pointermove="handleDragMove"
+            @pointerup="handleDragEnd"
+            @touchstart="handleDragStart"
+            @touchmove="handleDragMove"
+            @touchend="handleDragEnd"
+          >
+            <slot name="header" :close="() => closeSheet(true)">
+              <div class="ttdk-bottomsheet-header-info">
+                <h3 v-if="title" class="ttdk-bottomsheet-title">{{ title }}</h3>
+                <p v-if="description" class="ttdk-bottomsheet-description">{{ description }}</p>
+              </div>
+              <button
+                v-if="close"
+                type="button"
+                class="ttdk-bottomsheet-close"
+                aria-label="Tutup lembar"
+                @click.stop="() => closeSheet(true)"
+              >
+                <slot name="close-icon">
+                  <component :is="closeIcon" v-if="closeIcon" />
+                  <svg
+                    v-else
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </slot>
+              </button>
+            </slot>
+          </div>
+
+          <!-- Body -->
+          <div
+            :class="['ttdk-bottomsheet-body', bodyClass || '']"
+            :style="{
+              ...buildUiVars(bodyStyle),
+            }"
+          >
+            <slot :close="() => closeSheet(true)">
+              <component :is="body" v-if="body" :close="() => closeSheet(true)" />
+            </slot>
+          </div>
+
+          <!-- Footer -->
+          <div
+            v-if="hasFooter"
+            :class="['ttdk-bottomsheet-footer', footerClass || '']"
+            :style="{
+              ...buildUiVars(footerStyle),
+            }"
+          >
+            <slot name="footer" :close="() => closeSheet(true)">
+              <component :is="footer" v-if="footer" :close="() => closeSheet(true)" />
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, useSlots } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+import "./bottomsheet.css";
+
+export type BottomSheetHeight = 'auto' | 'sm' | 'md' | 'lg' | 'full';
+export type BottomSheetMode = 'auto' | 'ios' | 'material';
+export type BottomSheetUiProps = UiProps;
+
+export interface BottomSheetProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  title?: string;
+  description?: string;
+  height?: BottomSheetHeight;
+  maxHeight?: string;
+  mode?: BottomSheetMode;
+  handle?: boolean;
+  swipeable?: boolean;
+  close?: boolean;
+  closeIcon?: any;
+  dismissible?: boolean;
+  preventClose?: boolean;
+  overlay?: boolean;
+  preventScroll?: boolean;
+  header?: any;
+  body?: any;
+  footer?: any;
+  content?: any;
+  ui?: BottomSheetUiProps;
+  className?: string;
+  class?: string;
+  style?: any;
+  overlayClass?: string;
+  overlayStyle?: any;
+  contentClass?: string;
+  contentStyle?: any;
+  headerClass?: string;
+  headerStyle?: any;
+  bodyClass?: string;
+  bodyStyle?: any;
+  footerClass?: string;
+  footerStyle?: any;
+  handleClass?: string;
+  handleStyle?: any;
+  onOpenChange?: (open: boolean) => void;
+  onUpdateOpen?: (open: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onClosePrevent?: () => void;
+}
+
+const props = withDefaults(defineProps<BottomSheetProps>(), {
+  defaultOpen: false,
+  height: "auto",
+  mode: "auto",
+  handle: true,
+  swipeable: true,
+  close: false,
+  dismissible: true,
+  preventClose: false,
+  overlay: true,
+  preventScroll: true,
+});
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+  (e: "close:prevent"): void;
+}>();
+
+const slots = useSlots();
+const rootRef = ref<HTMLElement | null>(null);
+const sheetRef = ref<HTMLElement | null>(null);
+
+const isOpen = ref(props.open !== undefined ? props.open : props.defaultOpen);
+const isClosing = ref(false);
+const isDragging = ref(false);
+const dragOffset = ref(0);
+const touchStartY = ref(0);
+const isAnimDone = ref(false);
+const isShaking = ref(false);
+let shakeTimer: any = null;
+let animTimer: any = null;
+
+const hasHeader = computed(() => {
+  return Boolean(slots.header || props.header || props.title || props.description || props.close);
+});
+
+const hasFooter = computed(() => {
+  return Boolean(slots.footer || props.footer);
+});
+
+let lockCount = 0;
+let originalOverflow = "";
+let originalPaddingRight = "";
+
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    originalOverflow = document.body.style.overflow;
+    originalPaddingRight = document.body.style.paddingRight;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      document.body.style.paddingRight = scrollBarWidth + "px";
+    }
+  }
+  lockCount++;
+}
+
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = originalOverflow;
+    document.body.style.paddingRight = originalPaddingRight;
+  }
+}
+
+let isScrollLocked = false;
+function applyScrollLock(shouldLock: boolean) {
+  if (shouldLock && !isScrollLocked) {
+    lockBodyScroll();
+    isScrollLocked = true;
+  } else if (!shouldLock && isScrollLocked) {
+    unlockBodyScroll();
+    isScrollLocked = false;
+  }
+}
+
+function isDismissible() {
+  if (props.preventClose === true) return false;
+  return props.dismissible !== false;
+}
+
+function triggerShake() {
+  if (shakeTimer) clearTimeout(shakeTimer);
+  isAnimDone.value = true;
+  isShaking.value = true;
+  shakeTimer = setTimeout(() => {
+    isShaking.value = false;
+    shakeTimer = null;
+  }, 400);
+}
+
+function openSheet() {
+  if (!isOpen.value) {
+    isOpen.value = true;
+    isClosing.value = false;
+    isAnimDone.value = false;
+    if (animTimer) clearTimeout(animTimer);
+    animTimer = setTimeout(() => {
+      isAnimDone.value = true;
+    }, 300);
+    emit("update:open", true);
+    emit("update:modelValue", true);
+    emit("open");
+    if (props.onOpen) props.onOpen();
+    if (props.onUpdateOpen) props.onUpdateOpen(true);
+    if (props.onOpenChange) props.onOpenChange(true);
+  }
+}
+
+function closeSheet(force?: boolean) {
+  if (!isDismissible() && !force) {
+    triggerShake();
+    emit("close:prevent");
+    if (props.onClosePrevent) props.onClosePrevent();
+    return;
+  }
+  if (isOpen.value) {
+    isOpen.value = false;
+    isAnimDone.value = false;
+    isClosing.value = false;
+    emit("update:open", false);
+    emit("update:modelValue", false);
+    emit("close");
+    if (props.onClose) props.onClose();
+    if (props.onUpdateOpen) props.onUpdateOpen(false);
+    if (props.onOpenChange) props.onOpenChange(false);
+  }
+}
+
+function handleOverlayClick() {
+  closeSheet();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isOpen.value) return;
+  if (event.key === "Escape") {
+    closeSheet();
+  }
+}
+
+function handleDragStart(event: any) {
+  if (props.swipeable === false) return;
+  if (event.button !== undefined && event.button !== 0) return;
+  if (event.target && event.target.closest && event.target.closest("button, a, input, select, textarea")) {
+    return;
+  }
+  const clientY = event.clientY !== undefined ? event.clientY : (event.touches && event.touches[0] ? event.touches[0].clientY : 0);
+  touchStartY.value = clientY;
+  isDragging.value = true;
+  dragOffset.value = 0;
+  if (event.currentTarget && typeof event.currentTarget.setPointerCapture === "function" && event.pointerId !== undefined) {
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch (_) {}
+  }
+}
+
+function handleDragMove(event: any) {
+  if (!isDragging.value) return;
+  const clientY = event.clientY !== undefined ? event.clientY : (event.touches && event.touches[0] ? event.touches[0].clientY : 0);
+  const delta = clientY - touchStartY.value;
+  if (delta > 0) {
+    dragOffset.value = delta;
+  } else {
+    dragOffset.value = delta * 0.2;
+  }
+}
+
+function handleDragEnd(event?: any) {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+  if (event && event.currentTarget && typeof event.currentTarget.releasePointerCapture === "function" && event.pointerId !== undefined) {
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch (_) {}
+  }
+  const currentOffset = dragOffset.value;
+  if (currentOffset > 70) {
+    isClosing.value = true;
+    setTimeout(() => {
+      isClosing.value = false;
+      dragOffset.value = 0;
+      closeSheet(true);
+    }, 220);
+  } else {
+    dragOffset.value = 0;
+  }
+}
+
+function onWindowPointerMove(e: PointerEvent) {
+  if (isDragging.value) handleDragMove(e);
+}
+function onWindowPointerUp(e: PointerEvent) {
+  if (isDragging.value) handleDragEnd(e);
+}
+
+watch(
+  () => props.open,
+  (val) => {
+    if (val !== undefined && val !== isOpen.value) {
+      if (val) {
+        openSheet();
+      } else {
+        closeSheet(true);
+      }
+    }
+  }
+);
+
+watch(
+  isOpen,
+  (val) => {
+    applyScrollLock(val && props.preventScroll !== false);
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (isOpen.value) {
+    applyScrollLock(props.preventScroll !== false);
+  }
+  if (typeof document !== "undefined") {
+    document.addEventListener("keydown", handleKeyDown, true);
+    window.addEventListener("pointermove", onWindowPointerMove);
+    window.addEventListener("pointerup", onWindowPointerUp);
+  }
+});
+
+onUnmounted(() => {
+  applyScrollLock(false);
+  if (shakeTimer) clearTimeout(shakeTimer);
+  if (animTimer) clearTimeout(animTimer);
+  if (typeof document !== "undefined") {
+    document.removeEventListener("keydown", handleKeyDown, true);
+    window.removeEventListener("pointermove", onWindowPointerMove);
+    window.removeEventListener("pointerup", onWindowPointerUp);
+  }
+});
+</script>

package/src/webview/bottomsheet/bottomsheet.vue.d.ts

@@ -0,0 +1,178 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type BottomSheetHeight = "auto" | "sm" | "md" | "lg" | "full";
+
+export type BottomSheetMode = "auto" | "ios" | "material";
+
+export type BottomSheetUiProps = UiProps;
+
+export interface BottomSheetProps {
+  /**
+   * Status visibilitas bottom sheet (mode controlled).
+   * Mendukung `v-model:open` / `v-model` pada Vue dan controlled prop `open` pada React.
+   */
+  open?: boolean;
+
+  /**
+   * Status visibilitas awal bottom sheet saat pertama kali dimuat (uncontrolled initial state).
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Judul teks di bagian header bottom sheet.
+   */
+  title?: string;
+
+  /**
+   * Deskripsi penjelasan di bagian header di bawah judul.
+   */
+  description?: string;
+
+  /**
+   * 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).
+   * @default 'auto'
+   */
+  height?: BottomSheetHeight;
+
+  /**
+   * Batas tinggi maksimum lembar sheet (contoh: '90vh', '600px').
+   */
+  maxHeight?: string;
+
+  /**
+   * 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).
+   * @default 'auto'
+   */
+  mode?: BottomSheetMode;
+
+  /**
+   * Menampilkan bilah pegangan geser (drag handle indicator) di bagian atas lembar.
+   * @default true
+   */
+  handle?: boolean;
+
+  /**
+   * Mengaktifkan gestur sentuh geser ke bawah (swipe-down) untuk menutup lembar.
+   * @default true
+   */
+  swipeable?: boolean;
+
+  /**
+   * Menampilkan tombol tutup 'X' di pojok kanan atas header.
+   * @default false
+   */
+  close?: boolean;
+
+  /**
+   * Ikon kustom untuk tombol tutup.
+   */
+  closeIcon?: any;
+
+  /**
+   * Mengizinkan lembar ditutup saat pengguna mengeklik backdrop overlay atau menekan tombol Escape.
+   * @default true
+   */
+  dismissible?: boolean;
+
+  /**
+   * Mencegah lembar ditutup saat klik di luar atau saat digeser (prevent close).
+   * Jika bernilai `true`, lembar hanya dapat ditutup via aksi eksplisit.
+   * @default false
+   */
+  preventClose?: boolean;
+
+  /**
+   * Menampilkan lapisan latar belakang redup (backdrop overlay).
+   * @default true
+   */
+  overlay?: boolean;
+
+  /**
+   * Mengunci scrolling pada halaman web di latar belakang saat lembar terbuka (body scroll lock).
+   * @default true
+   */
+  preventScroll?: boolean;
+
+  /**
+   * Konten kustom untuk bagian header lembar.
+   */
+  header?: any;
+
+  /**
+   * Konten kustom untuk bagian isi utama (body) lembar.
+   */
+  body?: any;
+
+  /**
+   * Konten kustom untuk bagian footer aksi di bawah lembar (misal: tombol konfirmasi / CTA).
+   */
+  footer?: any;
+
+  /**
+   * Penggantian seluruh konten lembar (mengabaikan layout header, body, footer bawaan).
+   */
+  content?: any;
+
+  /**
+   * Konten utama lembar bottom sheet (body content).
+   */
+  children?: any;
+
+  /**
+   * Callback event saat status terbuka/tertutup berubah (standar React).
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback event saat status terbuka/tertutup berubah untuk two-way binding `v-model:open` (Vue).
+   */
+  onUpdateOpen?: (open: boolean) => void;
+
+  /**
+   * Callback event saat lembar bottom sheet terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Callback event saat lembar bottom sheet ditutup.
+   */
+  onClose?: () => void;
+
+  /**
+   * Callback event saat pengguna mencoba menutup lembar tetapi dicegah karena `preventClose={true}`.
+   */
+  onClosePrevent?: () => void;
+
+  /**
+   * Kustomisasi visual granular pada elemen root melalui style-like object.
+   */
+  ui?: BottomSheetUiProps;
+  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;
+}
+
+declare const component: DefineComponent<BottomSheetProps>;
+export default component;

package/src/webview/bottomsheet/index.ts

@@ -0,0 +1,4 @@
+export { default as BottomSheet } from './bottomsheet.vue';
+export { default } from './bottomsheet.vue';
+export type { BottomSheetProps, BottomSheetUiProps, BottomSheetHeight, BottomSheetMode } from './bottomsheet.vue';
+export * from './bottomsheet.vue';