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

package/dist/web/popover/manifest.json

@@ -0,0 +1,396 @@
+{
+  "name": "@ttdk-design-system/popover",
+  "component": "Popover",
+  "folder": "popover",
+  "description": "Komponen Popover TTDK Design System — Selaras dengan Spesifikasi Nuxt UI Popover (UPopover): - Mendukung mode 'click' dan mode 'hover' dengan configurable openDelay dan closeDelay - Floating UI otomatis (computePosition, autoUpdate, flip, shift, offset, arrow) - Posisi cerdas (top, bottom, left, right, start, end) - Elemen panah (arrow) penunjuk arah dinamis - Mode modal dengan backdrop overlay - Penanganan dismissible & closePrevent (Esc key, outside click) - Dukungan controlled state (v-model:open) dan uncontrolled defaultOpen",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "popover.css",
+      "importPath": "web/popover/popover.css"
+    }
+  ],
+  "props": {
+    "open": {
+      "name": "open",
+      "type": "boolean",
+      "optional": true,
+      "default": null,
+      "description": "Status visibilitas popover (mode terkontrol / controlled state). Mendukung `v-model:open` 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 (mode tidak terkontrol / uncontrolled initial state).",
+      "example": null,
+      "param": null
+    },
+    "arrow": {
+      "name": "arrow",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan elemen panah (arrow) penunjuk arah yang menunjuk ke elemen pemicu.",
+      "example": null,
+      "param": null
+    },
+    "dismissible": {
+      "name": "dismissible",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Mengizinkan popover ditutup saat pengguna mengeklik area di luar popover atau menekan tombol `Escape`. Jika bernilai `false`, popover tidak akan tertutup dan event `onClosePrevent` akan dipanggil.",
+      "example": null,
+      "param": null
+    },
+    "modal": {
+      "name": "modal",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengaktifkan mode modal dengan menampilkan lapisan latar belakang redup (backdrop overlay) serta memblokir interaksi di luar popover dan mengunci scroll latar belakang.",
+      "example": null,
+      "param": null
+    },
+    "preventScroll": {
+      "name": "preventScroll",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengunci pengguliran halaman web (body scroll lock) saat popover sedang terbuka, sehingga pengguna tidak dapat menggulir halaman di latar belakang. Otomatis aktif saat `modal={true}` kecuali dinyatakan `false`.",
+      "example": null,
+      "param": null
+    },
+    "lockScroll": {
+      "name": "lockScroll",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Alias untuk `preventScroll`.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan pemicu sehingga popover tidak dapat dibuka.",
+      "example": null,
+      "param": null
+    },
+    "content": {
+      "name": "content",
+      "type": "PopoverContentOptions | any",
+      "optional": true,
+      "default": null,
+      "description": "Opsi konfigurasi penempatan dan benturan popover (side, align, sideOffset, dsb.) ATAU elemen konten popover secara langsung jika tidak menggunakan slot/children.",
+      "example": null,
+      "param": null
+    },
+    "panel": {
+      "name": "panel",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom panel popover (alias untuk konten popover jika `content` dipakai untuk konfigurasi). Menerima ReactNode, VNode, string, atau render function `({ close }) => ReactNode`.",
+      "example": null,
+      "param": null
+    },
+    "panelContent": {
+      "name": "panelContent",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom panel popover (kompatibilitas selaras dengan Dropdown panelContent). Menerima ReactNode, VNode, string, atau render function `({ close }) => ReactNode`.",
+      "example": null,
+      "param": null
+    },
+    "placement": {
+      "name": "placement",
+      "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'",
+      "optional": true,
+      "default": "bottom",
+      "description": "Pintasan posisi penempatan panel popover Floating UI ('top', 'bottom', 'left', 'right', dsb.) Selaras dengan konfigurasi content.side dan content.align.",
+      "example": null,
+      "param": null
+    },
+    "offsetDistance": {
+      "name": "offsetDistance",
+      "type": "number",
+      "optional": true,
+      "default": "8",
+      "description": "Jarak offset dalam pixel dari elemen pemicu (shorthand untuk content.sideOffset).",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan popover memenuhi lebar kontainer penuh (full width 100%).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "PopoverUiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular wrapper utama (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Style inline CSS native untuk wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "triggerClass": {
+      "name": "triggerClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk pemicu (trigger container).",
+      "example": null,
+      "param": null
+    },
+    "triggerStyle": {
+      "name": "triggerStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk pemicu (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "contentClass": {
+      "name": "contentClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk panel popover konten.",
+      "example": null,
+      "param": null
+    },
+    "contentStyle": {
+      "name": "contentStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk panel popover konten (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "arrowClass": {
+      "name": "arrowClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen panah (arrow).",
+      "example": null,
+      "param": null
+    },
+    "arrowStyle": {
+      "name": "arrowStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen panah (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "overlayClass": {
+      "name": "overlayClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk lapisan latar belakang redup (modal overlay).",
+      "example": null,
+      "param": null
+    },
+    "overlayStyle": {
+      "name": "overlayStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk lapisan latar belakang redup (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 popover terbuka.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat popover ditutup.",
+      "example": null,
+      "param": null
+    },
+    "onClosePrevent": {
+      "name": "onClosePrevent",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mencoba menutup popover tetapi dicegah karena dismissible={false}.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Elemen pemicu (trigger), tombol, atau komponen anak lainnya.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "PopoverContentOptions": {
+      "side": {
+        "name": "side",
+        "type": "'top' | 'right' | 'bottom' | 'left'",
+        "optional": true,
+        "default": "bottom",
+        "description": "Sisi penempatan relatif terhadap elemen pemicu (trigger).",
+        "example": null,
+        "param": null
+      },
+      "align": {
+        "name": "align",
+        "type": "'start' | 'center' | 'end'",
+        "optional": true,
+        "default": "center",
+        "description": "Penjajaran di sepanjang sumbu sisi yang dipilih.",
+        "example": null,
+        "param": null
+      },
+      "sideOffset": {
+        "name": "sideOffset",
+        "type": "number",
+        "optional": true,
+        "default": "8",
+        "description": "Jarak offset dalam pixel dari elemen pemicu (trigger).",
+        "example": null,
+        "param": null
+      },
+      "alignOffset": {
+        "name": "alignOffset",
+        "type": "number",
+        "optional": true,
+        "default": "0",
+        "description": "Offset dalam pixel di sepanjang sumbu penjajaran (alignment axis).",
+        "example": null,
+        "param": null
+      },
+      "avoidCollisions": {
+        "name": "avoidCollisions",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Mencegah popover terpotong keluar dari batas viewport layar dengan memanfaatkan middleware flip dan shift.",
+        "example": null,
+        "param": null
+      },
+      "collisionBoundary": {
+        "name": "collisionBoundary",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Batas kontainer pendeteksi benturan viewport.",
+        "example": null,
+        "param": null
+      },
+      "collisionPadding": {
+        "name": "collisionPadding",
+        "type": "number",
+        "optional": true,
+        "default": "8",
+        "description": "Jarak padding minimal dalam pixel dari tepi layar saat terjadi benturan.",
+        "example": null,
+        "param": null
+      },
+      "arrowPadding": {
+        "name": "arrowPadding",
+        "type": "number",
+        "optional": true,
+        "default": "8",
+        "description": "Jarak padding minimal dalam pixel untuk elemen panah (arrow) dari sudut popover.",
+        "example": null,
+        "param": null
+      },
+      "sticky": {
+        "name": "sticky",
+        "type": "'partial' | 'always'",
+        "optional": true,
+        "default": null,
+        "description": "Perilaku popover saat elemen pemicu tergulung keluar layar ('partial' | 'always').",
+        "example": null,
+        "param": null
+      },
+      "hideWhenDetached": {
+        "name": "hideWhenDetached",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Sembunyikan popover ketika pemicu terpisah atau tidak terlihat di viewport.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/web/popover/popover.css

@@ -0,0 +1 @@
+.ttdk-popover-wrapper{box-sizing:border-box;font-family:var(--ttdk-font-sans);display:inline-block;position:relative}.ttdk-popover-wrapper[data-block=true]{width:100%;display:block}.ttdk-popover-trigger{box-sizing:border-box;cursor:pointer;user-select:none;color:inherit;background:0 0;border:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;font-family:inherit;transition:opacity .15s,transform .1s;display:inline-flex}.ttdk-popover-trigger[data-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}.ttdk-popover-wrapper[data-block=true] .ttdk-popover-trigger{width:100%;display:flex}.ttdk-popover-overlay{z-index:998;-webkit-backdrop-filter:blur(2px);background-color:#0f172a59;animation:.18s cubic-bezier(.16,1,.3,1) forwards ttdk-popover-overlay-in;position:fixed;inset:0}.dark .ttdk-popover-overlay{background-color:#0009}@keyframes ttdk-popover-overlay-in{0%{opacity:0}to{opacity:1}}.ttdk-popover-content{z-index:999;background:var(--ttdk-ui-bg,var(--ttdk-bg-base-primary,#fff));min-width:200px;max-width:calc(100vw - 32px);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#141313));border:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#e5e7eb));border-radius:var(--ttdk-ui-radius,var(--ttdk-radius-card-md,12px));box-sizing:border-box;font-family:var(--ttdk-font-sans);will-change:transform, opacity;outline:none;padding:16px;font-size:14px;line-height:20px;animation:.16s cubic-bezier(.16,1,.3,1) forwards ttdk-popover-fade-in;position:absolute;top:0;left:0;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #00000014}.dark .ttdk-popover-content{background:var(--ttdk-ui-bg,var(--ttdk-bg-base-primary,#1e2022));color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#f9fafb));border-color:var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#2e3235));box-shadow:0 12px 30px -4px #0000008c,0 8px 12px -6px #0006}@keyframes ttdk-popover-fade-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ttdk-popover-arrow{background:inherit;border:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#e5e7eb));pointer-events:none;box-sizing:border-box;z-index:1000;width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dark .ttdk-popover-arrow{border-color:var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#2e3235))}.ttdk-popover-content[data-side=bottom] .ttdk-popover-arrow{border-bottom:none;border-right:none;top:-5px}.ttdk-popover-content[data-side=top] .ttdk-popover-arrow{border-top:none;border-left:none;bottom:-5px}.ttdk-popover-content[data-side=right] .ttdk-popover-arrow{border-top:none;border-right:none;left:-5px}.ttdk-popover-content[data-side=left] .ttdk-popover-arrow{border-bottom:none;border-left:none;right:-5px}.ttdk-popover-header{color:var(--ttdk-text-icon-primary,#141313);margin-bottom:8px;font-size:14px;font-weight:600}.dark .ttdk-popover-header{color:var(--ttdk-text-icon-primary,#f9fafb)}.ttdk-popover-body{color:var(--ttdk-text-icon-secondary,#4b5563);font-size:13px;line-height:18px}.dark .ttdk-popover-body{color:var(--ttdk-text-icon-secondary,#9ca3af)}.ttdk-popover-footer{border-top:1px solid var(--ttdk-stroke-subtle,#e5e7eb);justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;padding-top:10px;display:flex}.dark .ttdk-popover-footer{border-top-color:var(--ttdk-stroke-subtle,#2e3235)}