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

package/src/webview/bottomsheet/manifest.json

@@ -0,0 +1,377 @@
+{
+  "name": "@ttdk-design-system/bottomsheet",
+  "component": "BottomSheet",
+  "folder": "bottomsheet",
+  "description": "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.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "bottomsheet.css",
+      "importPath": "webview/bottomsheet/bottomsheet.css"
+    }
+  ],
+  "props": {},
+  "subInterfaces": {
+    "BottomSheetProps": {
+      "open": {
+        "name": "open",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "description": "Status visibilitas bottom sheet (mode controlled). Mendukung `v-model:open` / `v-model` pada Vue dan controlled prop `open` pada React.",
+        "example": null,
+        "param": null
+      },
+      "defaultOpen": {
+        "name": "defaultOpen",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Status visibilitas awal bottom sheet saat pertama kali dimuat (uncontrolled initial state).",
+        "example": null,
+        "param": null
+      },
+      "title": {
+        "name": "title",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Judul teks di bagian header bottom sheet.",
+        "example": null,
+        "param": null
+      },
+      "description": {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Deskripsi penjelasan di bagian header di bawah judul.",
+        "example": null,
+        "param": null
+      },
+      "height": {
+        "name": "height",
+        "type": "BottomSheetHeight",
+        "optional": true,
+        "default": "auto",
+        "description": "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).",
+        "example": null,
+        "param": null
+      },
+      "maxHeight": {
+        "name": "maxHeight",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Batas tinggi maksimum lembar sheet (contoh: '90vh', '600px').",
+        "example": null,
+        "param": null
+      },
+      "mode": {
+        "name": "mode",
+        "type": "BottomSheetMode",
+        "optional": true,
+        "default": "auto",
+        "description": "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).",
+        "example": null,
+        "param": null
+      },
+      "handle": {
+        "name": "handle",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Menampilkan bilah pegangan geser (drag handle indicator) di bagian atas lembar.",
+        "example": null,
+        "param": null
+      },
+      "swipeable": {
+        "name": "swipeable",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Mengaktifkan gestur sentuh geser ke bawah (swipe-down) untuk menutup lembar.",
+        "example": null,
+        "param": null
+      },
+      "close": {
+        "name": "close",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menampilkan tombol tutup 'X' di pojok kanan atas header.",
+        "example": null,
+        "param": null
+      },
+      "closeIcon": {
+        "name": "closeIcon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon kustom untuk tombol tutup.",
+        "example": null,
+        "param": null
+      },
+      "dismissible": {
+        "name": "dismissible",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Mengizinkan lembar ditutup saat pengguna mengeklik backdrop overlay atau menekan tombol Escape.",
+        "example": null,
+        "param": null
+      },
+      "preventClose": {
+        "name": "preventClose",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Mencegah lembar ditutup saat klik di luar atau saat digeser (prevent close). Jika bernilai `true`, lembar hanya dapat ditutup via aksi eksplisit.",
+        "example": null,
+        "param": null
+      },
+      "overlay": {
+        "name": "overlay",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Menampilkan lapisan latar belakang redup (backdrop overlay).",
+        "example": null,
+        "param": null
+      },
+      "preventScroll": {
+        "name": "preventScroll",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Mengunci scrolling pada halaman web di latar belakang saat lembar terbuka (body scroll lock).",
+        "example": null,
+        "param": null
+      },
+      "header": {
+        "name": "header",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten kustom untuk bagian header lembar.",
+        "example": null,
+        "param": null
+      },
+      "body": {
+        "name": "body",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten kustom untuk bagian isi utama (body) lembar.",
+        "example": null,
+        "param": null
+      },
+      "footer": {
+        "name": "footer",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten kustom untuk bagian footer aksi di bawah lembar (misal: tombol konfirmasi / CTA).",
+        "example": null,
+        "param": null
+      },
+      "content": {
+        "name": "content",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Penggantian seluruh konten lembar (mengabaikan layout header, body, footer bawaan).",
+        "example": null,
+        "param": null
+      },
+      "children": {
+        "name": "children",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten utama lembar bottom sheet (body content).",
+        "example": null,
+        "param": null
+      },
+      "onOpenChange": {
+        "name": "onOpenChange",
+        "type": "(open: boolean) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat status terbuka/tertutup berubah (standar React).",
+        "example": null,
+        "param": null
+      },
+      "onUpdateOpen": {
+        "name": "onUpdateOpen",
+        "type": "(open: boolean) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat status terbuka/tertutup berubah untuk two-way binding `v-model:open` (Vue).",
+        "example": null,
+        "param": null
+      },
+      "onOpen": {
+        "name": "onOpen",
+        "type": "() => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat lembar bottom sheet terbuka.",
+        "example": null,
+        "param": null
+      },
+      "onClose": {
+        "name": "onClose",
+        "type": "() => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat lembar bottom sheet ditutup.",
+        "example": null,
+        "param": null
+      },
+      "onClosePrevent": {
+        "name": "onClosePrevent",
+        "type": "() => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat pengguna mencoba menutup lembar tetapi dicegah karena `preventClose={true}`.",
+        "example": null,
+        "param": null
+      },
+      "ui": {
+        "name": "ui",
+        "type": "BottomSheetUiProps",
+        "optional": true,
+        "default": null,
+        "description": "Kustomisasi visual granular pada elemen root melalui style-like object.",
+        "example": null,
+        "param": null
+      },
+      "className": {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "overlayClass": {
+        "name": "overlayClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "overlayStyle": {
+        "name": "overlayStyle",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "contentClass": {
+        "name": "contentClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "contentStyle": {
+        "name": "contentStyle",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "headerClass": {
+        "name": "headerClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "headerStyle": {
+        "name": "headerStyle",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "bodyClass": {
+        "name": "bodyClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "bodyStyle": {
+        "name": "bodyStyle",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "footerClass": {
+        "name": "footerClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "footerStyle": {
+        "name": "footerStyle",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "handleClass": {
+        "name": "handleClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "handleStyle": {
+        "name": "handleStyle",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/webview/button/AI_GUIDE.md

@@ -0,0 +1,79 @@
+# <ButtonMaterial /> — TTDK Component Reference
+
+TTDK ButtonMaterial component with multi-theme support.
+
+## 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/button/button-ios.css";`
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/webview/button/button-material.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import ButtonMaterial from "@ttdk-design-system/library-react/webview/button";
+
+// Vue 3
+import ButtonMaterial from "@ttdk-design-system/library-vue/webview/button";
+
+// Svelte
+import ButtonMaterial from "@ttdk-design-system/library-svelte/webview/button";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+
+### Sub-interface: `ButtonMaterialProps`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `style?` | `any` | `-` | Inline CSS style kustom. |
+| `variant?` | `'filled' | 'elevated' | 'tonal' | 'outlined' | 'text'` | `filled` | 5 Tipe tombol resmi Material Design 3 (M3): - `'filled'`: Tombol kontainer warna primer pekat (high emphasis, default). - `'elevated'`: Tombol berlatar surface dengan bayangan elevasi level 1. - `'tonal'`: Tombol warna kontainer sekunder (medium-high emphasis). - `'outlined'`: Tombol bergaris tepi 1px dengan latar transparan. - `'text'`: Tombol teks tanpa latar dan border (low emphasis). |
+| `color?` | `'primary' | 'secondary' | 'tertiary' | 'error'` | `primary` | Skema peran warna Material 3: - `'primary'`: Warna tema primer (M3 Primary). - `'secondary'`: Warna tema sekunder (M3 Secondary). - `'tertiary'`: Warna tema tersier (M3 Tertiary). - `'error'`: Warna peringatan / bahaya (M3 Error). |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran tombol M3: - `'sm'`: 32px (compact) - `'md'`: 40px (standar M3 spec) - `'lg'`: 48px (large touch target) |
+| `shape?` | `'pill' | 'rounded'` | `pill` | Bentuk sudut kontainer: - `'pill'`: Full rounded pill khas Material 3 (border-radius: 9999px). - `'rounded'`: Sudut membulat medium (~12px). |
+| `type?` | `'button' | 'submit' | 'reset'` | `button` | Tipe tombol HTML native. |
+| `disabled?` | `boolean` | `false` | Kondisi non-aktif tombol. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading M3. |
+| `block?` | `boolean` | `false` | Lebar penuh 100% mengikuti kontainer induk. |
+| `id?` | `string` | `-` | ID unik elemen HTML. |
+| `ui?` | `ButtonMaterialUiProps` | `-` | Konfigurasi styling kustom UI. |
+| `onClick?` | `(event: any) => void` | `-` | Callback saat tombol ditekan / diklik. |
+| `children?` | `any` | `-` | Konten label / elemen di dalam tombol. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import ButtonMaterial from "@ttdk-design-system/library-react/webview/button";
+import "@ttdk-design-system/library-react/webview/button/button.css";
+
+export function Example() {
+  return (
+    <ButtonMaterial />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import ButtonMaterial from "@ttdk-design-system/library-vue/webview/button";
+import "@ttdk-design-system/library-vue/webview/button/button.css";
+</script>
+
+<template>
+  <ButtonMaterial />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import ButtonMaterial from "@ttdk-design-system/library-svelte/webview/button";
+  import "@ttdk-design-system/library-svelte/webview/button/button.css";
+</script>
+
+<ButtonMaterial />
+```

package/src/webview/button/button-ios.css

@@ -0,0 +1 @@
+.ttdk-btn-ios{box-sizing:border-box;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;letter-spacing:-.015em;border:none;outline:none;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Helvetica Neue,sans-serif;font-weight:600;line-height:1.2;text-decoration:none;transition:opacity .15s cubic-bezier(.25,1,.5,1),transform .15s cubic-bezier(.25,1,.5,1),background-color .15s;display:inline-flex;position:relative}.ttdk-btn-ios:after{content:"";pointer-events:none;width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ttdk-btn-ios:active:not(:disabled):not(.ttdk-btn-ios--loading){opacity:.62;transform:scale(.975)}.ttdk-btn-ios--block{width:100%;display:flex}.ttdk-btn-ios--sm{border-radius:8px;gap:6px;height:30px;padding:0 12px;font-size:13px}.ttdk-btn-ios--md{border-radius:12px;gap:8px;height:42px;padding:0 18px;font-size:15px}.ttdk-btn-ios--lg{border-radius:14px;gap:10px;height:50px;padding:0 24px;font-size:17px}.ttdk-btn-ios--capsule{border-radius:9999px!important}.ttdk-btn-ios--filled.ttdk-btn-ios--primary{background-color:var(--ttdk-ios-primary,#007aff);color:#fff}.ttdk-btn-ios--filled.ttdk-btn-ios--success{background-color:var(--ttdk-ios-success,#34c759);color:#fff}.ttdk-btn-ios--filled.ttdk-btn-ios--warning{background-color:var(--ttdk-ios-warning,#ff9500);color:#fff}.ttdk-btn-ios--filled.ttdk-btn-ios--danger{background-color:var(--ttdk-ios-danger,#ff3b30);color:#fff}.ttdk-btn-ios--filled.ttdk-btn-ios--neutral{background-color:var(--ttdk-ios-neutral,#8e8e93);color:#fff}.ttdk-btn-ios--tinted.ttdk-btn-ios--primary{color:#007aff;background-color:#007aff26}.ttdk-btn-ios--tinted.ttdk-btn-ios--success{color:#34c759;background-color:#34c75926}.ttdk-btn-ios--tinted.ttdk-btn-ios--warning{color:#ff9500;background-color:#ff950026}.ttdk-btn-ios--tinted.ttdk-btn-ios--danger{color:#ff3b30;background-color:#ff3b3026}.ttdk-btn-ios--tinted.ttdk-btn-ios--neutral{color:#636366;background-color:#8e8e9326}.ttdk-btn-ios--gray{color:#000;background-color:#78788029}.ttdk-btn-ios--gray.ttdk-btn-ios--primary{color:#007aff}.ttdk-btn-ios--gray.ttdk-btn-ios--success{color:#34c759}.ttdk-btn-ios--gray.ttdk-btn-ios--warning{color:#ff9500}.ttdk-btn-ios--gray.ttdk-btn-ios--danger{color:#ff3b30}.ttdk-btn-ios--plain{background-color:#0000;padding-left:4px;padding-right:4px}.ttdk-btn-ios--plain.ttdk-btn-ios--primary{color:#007aff}.ttdk-btn-ios--plain.ttdk-btn-ios--success{color:#34c759}.ttdk-btn-ios--plain.ttdk-btn-ios--warning{color:#ff9500}.ttdk-btn-ios--plain.ttdk-btn-ios--danger{color:#ff3b30}.ttdk-btn-ios--plain.ttdk-btn-ios--neutral{color:#8e8e93}.ttdk-btn-ios--plain:active:not(:disabled){opacity:.4;transform:none}.ttdk-btn-ios:disabled,.ttdk-btn-ios--disabled{opacity:.38!important;cursor:not-allowed!important;pointer-events:none!important;transform:none!important}.ttdk-btn-ios--loading{cursor:wait}.ttdk-btn-ios__spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:1.1em;height:1.1em;animation:.8s linear infinite ttdk-ios-spin;display:inline-block}@keyframes ttdk-ios-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/src/webview/button/button-ios.vue

@@ -0,0 +1,138 @@
+<template>
+  <button
+    :id="id"
+    :type="type || 'button'"
+    :disabled="disabled || loading"
+    :class="
+      'ttdk-btn-ios' +
+      ' ttdk-btn-ios--' +
+      (variant || 'filled') +
+      ' ttdk-btn-ios--' +
+      (color || 'primary') +
+      ' ttdk-btn-ios--' +
+      (size || 'md') +
+      (shape === 'capsule' ? ' ttdk-btn-ios--capsule' : '') +
+      (block ? ' ttdk-btn-ios--block' : '') +
+      (loading ? ' ttdk-btn-ios--loading' : '') +
+      (disabled ? ' ttdk-btn-ios--disabled' : '') +
+      (ui?.class ? ' ' + ui.class : '')
+    "
+    :style="{
+      ...buildUiVars(ui?.style),
+        ...(typeof style === 'object' ? style : {}),
+    }"
+    @click="
+      async (e) => {
+        if (!disabled && !loading && onClick) {
+          onClick(e);
+        }
+      }
+    "
+  >
+    <template v-if="loading">
+      <span class="ttdk-btn-ios__spinner" aria-hidden="true"></span>
+    </template>
+
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type ButtonIosUiProps = UiProps;
+export interface ButtonIosProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+
+  /**
+   * Gaya varian tombol berdasarkan Apple Human Interface Guidelines:
+   * - `'filled'`: Tombol solid high-emphasis / prominent (default).
+   * - `'tinted'`: Tombol berlatar belakang transparan lembut dengan aksen warna.
+   * - `'gray'`: Tombol berlatar belakang abu-abu netral khas Apple (systemGray).
+   * - `'plain'`: Tombol teks tanpa latar dan border (link style).
+   *
+   * @default 'filled'
+   */
+  variant?: "filled" | "tinted" | "gray" | "plain";
+
+  /**
+   * Warna aksen semantik iOS:
+   * - `'primary'`: iOS System Blue (#007aff).
+   * - `'success'`: iOS System Green (#34c759).
+   * - `'warning'`: iOS System Orange (#ff9500).
+   * - `'danger'`: iOS System Red (#ff3b30).
+   * - `'neutral'`: iOS System Gray (#8e8e93).
+   *
+   * @default 'primary'
+   */
+  color?: "primary" | "success" | "warning" | "danger" | "neutral";
+
+  /**
+   * Skala ukuran tombol:
+   * - `'sm'`: 30px (compact)
+   * - `'md'`: 42px (standar iOS touch target)
+   * - `'lg'`: 50px (large CTA)
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut tombol:
+   * - `'rounded'`: Continuous curve squircle khas iOS (~10-14px).
+   * - `'capsule'`: Full pill / capsule (border-radius: 9999px).
+   *
+   * @default 'rounded'
+   */
+  shape?: "rounded" | "capsule";
+
+  /**
+   * Tipe tombol HTML native.
+   * @default 'button'
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Kondisi non-aktif tombol.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menampilkan iOS activity indicator / spinner.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Lebar penuh 100% mengikuti kontainer induk.
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * ID unik elemen HTML.
+   */
+  id?: string;
+
+  /**
+   * Konfigurasi styling kustom UI.
+   */
+  ui?: ButtonIosUiProps;
+
+  /**
+   * Callback saat tombol ditekan / diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Konten label / elemen di dalam tombol.
+   */
+  children?: any;
+}
+
+const props = defineProps<ButtonIosProps>();
+</script>