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

package/src/web/modal/AI_GUIDE.md

@@ -0,0 +1,171 @@
+# <Modal /> — TTDK Component Reference
+
+Komponen Modal TTDK Design System — Selaras dengan Spesifikasi Nuxt UI Modal (UModal): - Mode controlled (v-model:open / open) dan uncontrolled (defaultOpen) - Backdrop blur overlay redup dengan penguncian scroll latar belakang otomatis (preventScroll) - Pilihan ukuran responsif ('xs' s/d '5xl' serta 'fullscreen') - Struktur slot terstandarisasi (#header, #body, #footer, #content) - Penanganan dismissible & preventClose (Escape key, backdrop click, callback onClosePrevent) - Animasi scale-in dan efek visual getar (shake) saat penutupan dicegah
+
+## 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>/web/modal/modal.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Modal from "@ttdk-design-system/library-react/web/modal";
+
+// Vue 3
+import Modal from "@ttdk-design-system/library-vue/web/modal";
+
+// Svelte
+import Modal from "@ttdk-design-system/library-svelte/web/modal";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `open?` | `boolean` | `-` | Status visibilitas modal (mode terkontrol / controlled state). Mendukung `v-model:open` / `v-model` pada Vue 3 dan controlled prop `open` pada React. |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal saat pertama kali dirender (uncontrolled initial state). |
+| `title?` | `string` | `-` | Judul teks di bagian header modal. |
+| `description?` | `string` | `-` | Deskripsi penjelasan di bagian header modal di bawah judul. |
+| `close?` | `boolean | any` | `true` | Menampilkan tombol tutup 'X' di pojok kanan atas header. Berikan `false` untuk menyembunyikan tombol tutup. |
+| `closeIcon?` | `any` | `-` | Ikon kustom untuk tombol tutup. |
+| `fullscreen?` | `boolean` | `false` | Menjadikan modal tampil dalam ukuran layar penuh (fullscreen 100vw x 100vh). |
+| `size?` | `ModalSize` | `md` | Skala ukuran lebar maksimum modal dialog ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full'). |
+| `dismissible?` | `boolean` | `true` | Mengizinkan modal ditutup saat pengguna mengeklik latar belakang (backdrop) atau menekan tombol `Escape`. |
+| `preventClose?` | `boolean` | `false` | Mencegah modal ditutup saat klik di luar atau tombol `Escape` (alias selaras Nuxt UI prevent-close). Jika bernilai `true`, popover/modal tidak dapat ditutup kecuali melalui tombol aksi eksplisit di dalam modal. |
+| `overlay?` | `boolean` | `true` | Menampilkan lapisan latar belakang redup (backdrop overlay). |
+| `modal?` | `boolean` | `true` | Menjadikan modal sebagai dialog modal yang memusatkan fokus interaksi pengguna. |
+| `scrollable?` | `boolean` | `true` | Mengaktifkan area konten body yang dapat digulir jika isi modal melebihi tinggi layar. |
+| `preventScroll?` | `boolean` | `true` | Mengunci scrolling halaman web latar belakang saat modal sedang terbuka (body scroll lock). |
+| `lockScroll?` | `boolean` | `true` | Alias untuk `preventScroll`. |
+| `content?` | `any` | `-` | Konten kustom untuk seluruh dialog (menggantikan header, body, dan footer default). |
+| `header?` | `any` | `-` | Konten kustom untuk bagian header modal. |
+| `body?` | `any` | `-` | Konten kustom untuk bagian isi utama (body) modal. |
+| `footer?` | `any` | `-` | Konten kustom untuk bagian footer (biasanya tombol aksi Batal / Konfirmasi). |
+| `ui?` | `ModalUiProps` | `-` | Kustomisasi CSS variables atau token visual melalui UiProps. |
+| `className?` | `string` | `-` | Class CSS kustom pada elemen pembungkus terluar. |
+| `class?` | `string` | `-` | Class CSS kustom (alias framework Vue). |
+| `style?` | `any` | `-` | Style inline kustom pada kontainer dialog. |
+| `overlayClass?` | `string` | `-` | Class CSS kustom untuk lapisan backdrop overlay. |
+| `overlayStyle?` | `UiProps` | `-` | Style kustom untuk lapisan backdrop overlay (UiProps). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk kartu panel modal dialog. |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk kartu panel modal dialog (UiProps). |
+| `headerClass?` | `string` | `-` | Class CSS kustom untuk header modal. |
+| `headerStyle?` | `UiProps` | `-` | Style kustom untuk header modal (UiProps). |
+| `bodyClass?` | `string` | `-` | Class CSS kustom untuk body modal. |
+| `bodyStyle?` | `UiProps` | `-` | Style kustom untuk body modal (UiProps). |
+| `footerClass?` | `string` | `-` | Class CSS kustom untuk footer modal. |
+| `footerStyle?` | `UiProps` | `-` | Style kustom untuk footer modal (UiProps). |
+| `onUpdateOpen?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah (kompatibel dengan v-model:open pada Vue 3). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah (alias standar React). |
+| `onOpen?` | `() => void` | `-` | Callback event saat modal terbuka. |
+| `onClose?` | `() => void` | `-` | Callback event saat modal ditutup. |
+| `onClosePrevent?` | `() => void` | `-` | Callback event saat pengguna mencoba menutup modal tetapi dicegah karena preventClose={true} atau dismissible={false}. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger), tombol, atau konten modal default. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Modal from "@ttdk-design-system/library-react/web/modal";
+import Button from "@ttdk-design-system/library-react/button";
+import "@ttdk-design-system/library-react/web/modal/modal.css";
+import "@ttdk-design-system/library-react/button/button.css";
+
+export function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>
+        Buka Modal
+      </Button>
+
+      <Modal
+        open={open}
+        onOpenChange={setOpen}
+        title="Konfirmasi Tindakan Medis"
+        description="Pastikan data nakes dan rekam medis pasien sudah sesuai sebelum melanjutkan."
+        footer={
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px" }}>
+            <Button variant="ghost" onClick={() => setOpen(false)}>
+              Batal
+            </Button>
+            <Button variant="primary" onClick={() => setOpen(false)}>
+              Konfirmasi
+            </Button>
+          </div>
+        }
+      >
+        <p style={{ margin: 0, fontSize: "14px", color: "var(--ttdk-text-secondary)" }}>
+          Tindakan ini akan mencatat log integrasi data ke dalam platform SATUSEHAT Kementerian Kesehatan RI.
+        </p>
+      </Modal>
+    </>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Modal from "@ttdk-design-system/library-vue/web/modal";
+import Button from "@ttdk-design-system/library-vue/button";
+import "@ttdk-design-system/library-vue/web/modal/modal.css";
+import "@ttdk-design-system/library-vue/button/button.css";
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Button variant="primary" @click="isOpen = true">
+    Buka Modal
+  </Button>
+
+  <Modal
+    v-model:open="isOpen"
+    title="Konfirmasi Tindakan Medis"
+    description="Pastikan data nakes dan rekam medis pasien sudah sesuai sebelum melanjutkan."
+  >
+    <template #body>
+      <p style="margin: 0; font-size: 14px; color: var(--ttdk-text-secondary)">
+        Tindakan ini akan mencatat log integrasi data ke dalam platform SATUSEHAT Kementerian Kesehatan RI.
+      </p>
+    </template>
+    <template #footer="{ close }">
+      <div style="display: flex; justify-content: flex-end; gap: 8px">
+        <Button variant="ghost" @click="close">Batal</Button>
+        <Button variant="primary" @click="close">Konfirmasi</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Modal from "@ttdk-design-system/library-svelte/web/modal";
+  import Button from "@ttdk-design-system/library-svelte/button";
+  import "@ttdk-design-system/library-svelte/web/modal/modal.css";
+  import "@ttdk-design-system/library-svelte/button/button.css";
+
+  let isOpen = false;
+</script>
+
+<Button variant="primary" on:click={() => (isOpen = true)}>
+  Buka Modal
+</Button>
+
+<Modal
+  open={isOpen}
+  title="Konfirmasi Tindakan Medis"
+  description="Pastikan data nakes dan rekam medis pasien sudah sesuai sebelum melanjutkan."
+  onOpenChange={(val) => (isOpen = val)}
+>
+  <p style="margin: 0; font-size: 14px; color: var(--ttdk-text-secondary)">
+    Tindakan ini akan mencatat log integrasi data ke dalam platform SATUSEHAT Kementerian Kesehatan RI.
+  </p>
+</Modal>
+```

package/src/web/modal/index.ts

@@ -0,0 +1,3 @@
+export { default } from './modal';
+export { default as Modal } from './modal';
+export * from './modal';

package/src/web/modal/manifest.json

@@ -0,0 +1,375 @@
+{
+  "name": "@ttdk-design-system/modal",
+  "component": "Modal",
+  "folder": "modal",
+  "description": "Komponen Modal TTDK Design System — Selaras dengan Spesifikasi Nuxt UI Modal (UModal): - Mode controlled (v-model:open / open) dan uncontrolled (defaultOpen) - Backdrop blur overlay redup dengan penguncian scroll latar belakang otomatis (preventScroll) - Pilihan ukuran responsif ('xs' s/d '5xl' serta 'fullscreen') - Struktur slot terstandarisasi (#header, #body, #footer, #content) - Penanganan dismissible & preventClose (Escape key, backdrop click, callback onClosePrevent) - Animasi scale-in dan efek visual getar (shake) saat penutupan dicegah",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "modal.css",
+      "importPath": "web/modal/modal.css"
+    }
+  ],
+  "props": {
+    "open": {
+      "name": "open",
+      "type": "boolean",
+      "optional": true,
+      "default": null,
+      "description": "Status visibilitas modal (mode terkontrol / controlled state). Mendukung `v-model:open` / `v-model` pada Vue 3 dan controlled prop `open` pada React.",
+      "example": null,
+      "param": null
+    },
+    "defaultOpen": {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status visibilitas awal saat pertama kali dirender (uncontrolled initial state).",
+      "example": null,
+      "param": null
+    },
+    "title": {
+      "name": "title",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Judul teks di bagian header modal.",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi penjelasan di bagian header modal di bawah judul.",
+      "example": null,
+      "param": null
+    },
+    "close": {
+      "name": "close",
+      "type": "boolean | any",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan tombol tutup 'X' di pojok kanan atas header. Berikan `false` untuk menyembunyikan tombol tutup.",
+      "example": null,
+      "param": null
+    },
+    "closeIcon": {
+      "name": "closeIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk tombol tutup.",
+      "example": null,
+      "param": null
+    },
+    "fullscreen": {
+      "name": "fullscreen",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan modal tampil dalam ukuran layar penuh (fullscreen 100vw x 100vh).",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "ModalSize",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran lebar maksimum modal dialog ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full').",
+      "example": null,
+      "param": null
+    },
+    "dismissible": {
+      "name": "dismissible",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Mengizinkan modal ditutup saat pengguna mengeklik latar belakang (backdrop) atau menekan tombol `Escape`.",
+      "example": null,
+      "param": null
+    },
+    "preventClose": {
+      "name": "preventClose",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mencegah modal ditutup saat klik di luar atau tombol `Escape` (alias selaras Nuxt UI prevent-close). Jika bernilai `true`, popover/modal tidak dapat ditutup kecuali melalui tombol aksi eksplisit di dalam modal.",
+      "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
+    },
+    "modal": {
+      "name": "modal",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menjadikan modal sebagai dialog modal yang memusatkan fokus interaksi pengguna.",
+      "example": null,
+      "param": null
+    },
+    "scrollable": {
+      "name": "scrollable",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Mengaktifkan area konten body yang dapat digulir jika isi modal melebihi tinggi layar.",
+      "example": null,
+      "param": null
+    },
+    "preventScroll": {
+      "name": "preventScroll",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Mengunci scrolling halaman web latar belakang saat modal sedang terbuka (body scroll lock).",
+      "example": null,
+      "param": null
+    },
+    "lockScroll": {
+      "name": "lockScroll",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Alias untuk `preventScroll`.",
+      "example": null,
+      "param": null
+    },
+    "content": {
+      "name": "content",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom untuk seluruh dialog (menggantikan header, body, dan footer default).",
+      "example": null,
+      "param": null
+    },
+    "header": {
+      "name": "header",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom untuk bagian header modal.",
+      "example": null,
+      "param": null
+    },
+    "body": {
+      "name": "body",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom untuk bagian isi utama (body) modal.",
+      "example": null,
+      "param": null
+    },
+    "footer": {
+      "name": "footer",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom untuk bagian footer (biasanya tombol aksi Batal / Konfirmasi).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "ModalUiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi CSS variables atau token visual melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom pada elemen pembungkus terluar.",
+      "example": null,
+      "param": null
+    },
+    "class": {
+      "name": "class",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom (alias framework Vue).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Style inline kustom pada kontainer dialog.",
+      "example": null,
+      "param": null
+    },
+    "overlayClass": {
+      "name": "overlayClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk lapisan backdrop overlay.",
+      "example": null,
+      "param": null
+    },
+    "overlayStyle": {
+      "name": "overlayStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk lapisan backdrop overlay (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "contentClass": {
+      "name": "contentClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kartu panel modal dialog.",
+      "example": null,
+      "param": null
+    },
+    "contentStyle": {
+      "name": "contentStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk kartu panel modal dialog (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "headerClass": {
+      "name": "headerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk header modal.",
+      "example": null,
+      "param": null
+    },
+    "headerStyle": {
+      "name": "headerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk header modal (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "bodyClass": {
+      "name": "bodyClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk body modal.",
+      "example": null,
+      "param": null
+    },
+    "bodyStyle": {
+      "name": "bodyStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk body modal (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "footerClass": {
+      "name": "footerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk footer modal.",
+      "example": null,
+      "param": null
+    },
+    "footerStyle": {
+      "name": "footerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk footer modal (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "onUpdateOpen": {
+      "name": "onUpdateOpen",
+      "type": "(open: boolean) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat status terbuka/tertutup berubah (kompatibel dengan v-model:open pada Vue 3).",
+      "example": null,
+      "param": null
+    },
+    "onOpenChange": {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat status terbuka/tertutup berubah (alias standar React).",
+      "example": null,
+      "param": null
+    },
+    "onOpen": {
+      "name": "onOpen",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat modal terbuka.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat modal ditutup.",
+      "example": null,
+      "param": null
+    },
+    "onClosePrevent": {
+      "name": "onClosePrevent",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mencoba menutup modal tetapi dicegah karena preventClose={true} atau dismissible={false}.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Elemen pemicu (trigger), tombol, atau konten modal default.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/modal/modal.css

@@ -0,0 +1 @@
+.ttdk-modal-portal{z-index:var(--ttdk-z-modal,9999);box-sizing:border-box;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0;overflow:hidden auto}.ttdk-modal-overlay{z-index:1;-webkit-backdrop-filter:blur(4px);background-color:#0f172a99;animation:.2s cubic-bezier(.16,1,.3,1) forwards ttdkModalFadeIn;position:fixed;inset:0}:root[data-theme=dark] .ttdk-modal-overlay,.dark .ttdk-modal-overlay{background-color:#000000bf}.ttdk-modal-dialog{z-index:2;background-color:var(--card,#fff);width:100%;color:var(--foreground,#0f172a);border:1px solid var(--border,#e2e8f0);border-radius:var(--ttdk-radius-xl,12px);box-sizing:border-box;outline:none;flex-direction:column;margin:auto;animation:.22s cubic-bezier(.16,1,.3,1) forwards ttdkModalScaleIn;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a,0 0 1px #0000000d}.ttdk-modal-dialog.ttdk-modal-anim-done{opacity:1;animation:none;transform:none}:root[data-theme=dark] .ttdk-modal-dialog,.dark .ttdk-modal-dialog{background-color:var(--card,#0f172a);color:var(--foreground,#f8fafc);border-color:var(--border,#1e293b);box-shadow:0 25px 50px -12px #0009}.ttdk-modal-dialog.ttdk-modal-shake{animation:.35s cubic-bezier(.36,.07,.19,.97) both ttdkModalShake!important}.ttdk-modal-dialog[data-size=xs]{max-width:320px}.ttdk-modal-dialog[data-size=sm]{max-width:384px}.ttdk-modal-dialog[data-size=md]{max-width:448px}.ttdk-modal-dialog[data-size=lg]{max-width:512px}.ttdk-modal-dialog[data-size=xl]{max-width:576px}.ttdk-modal-dialog[data-size="2xl"]{max-width:672px}.ttdk-modal-dialog[data-size="3xl"]{max-width:768px}.ttdk-modal-dialog[data-size="4xl"]{max-width:896px}.ttdk-modal-dialog[data-size="5xl"]{max-width:1024px}.ttdk-modal-dialog[data-size=full]{width:100%;max-width:100vw}.ttdk-modal-dialog[data-fullscreen=true]{border:none;border-radius:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0}.ttdk-modal-portal:has(.ttdk-modal-dialog[data-fullscreen=true]){padding:0}.ttdk-modal-header{border-bottom:1px solid var(--border,#f1f5f9);flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px;display:flex}:root[data-theme=dark] .ttdk-modal-header,.dark .ttdk-modal-header{border-bottom-color:var(--border,#1e293b)}.ttdk-modal-header-info{flex-direction:column;flex:1;gap:4px;display:flex}.ttdk-modal-title{color:var(--foreground,#0f172a);margin:0;font-size:16px;font-weight:600;line-height:1.4}:root[data-theme=dark] .ttdk-modal-title,.dark .ttdk-modal-title{color:var(--foreground,#f8fafc)}.ttdk-modal-description{color:var(--muted-foreground,#64748b);margin:0;font-size:13.5px;line-height:1.5}:root[data-theme=dark] .ttdk-modal-description,.dark .ttdk-modal-description{color:var(--muted-foreground,#94a3b8)}.ttdk-modal-close{border-radius:var(--ttdk-radius-md,6px);width:32px;height:32px;color:var(--muted-foreground,#64748b);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex}.ttdk-modal-close:hover{background-color:var(--muted,#f1f5f9);color:var(--foreground,#0f172a)}:root[data-theme=dark] .ttdk-modal-close:hover,.dark .ttdk-modal-close:hover{background-color:var(--muted,#1e293b);color:var(--foreground,#f8fafc)}.ttdk-modal-close:focus-visible{outline:2px solid var(--primary,#0d9488);outline-offset:2px}.ttdk-modal-close svg{stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round}.ttdk-modal-body{color:var(--foreground,#0f172a);flex:auto;padding:20px;font-size:14px;line-height:1.6}:root[data-theme=dark] .ttdk-modal-body,.dark .ttdk-modal-body{color:var(--foreground,#f8fafc)}.ttdk-modal-dialog[data-scrollable=true] .ttdk-modal-body{overscroll-behavior:contain;max-height:calc(85vh - 140px);overflow-y:auto}.ttdk-modal-dialog[data-fullscreen=true] .ttdk-modal-body{max-height:none;overflow-y:auto}.ttdk-modal-footer{border-top:1px solid var(--border,#f1f5f9);background-color:var(--ttdk-surface-subtle,#fafafa);flex-shrink:0;justify-content:flex-end;align-items:center;gap:10px;padding:16px 20px;display:flex}:root[data-theme=dark] .ttdk-modal-footer,.dark .ttdk-modal-footer{border-top-color:var(--border,#1e293b);background-color:#0f172a66}.ttdk-modal-trigger-wrapper{display:inline-block}@keyframes ttdkModalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes ttdkModalScaleIn{0%{opacity:0;transform:scale(.95)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes ttdkModalShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}