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

package/src/web/tooltip/AI_GUIDE.md

@@ -0,0 +1,110 @@
+# <Tooltip /> — TTDK Component Reference
+
+Komponen Tooltip untuk menampilkan informasi kontekstual singkat saat pengguna mengarahkan kursor atau memfokuskan elemen pemicu.
+
+## 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/tooltip/tooltip.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Tooltip from "@ttdk-design-system/library-react/web/tooltip";
+
+// Vue 3
+import Tooltip from "@ttdk-design-system/library-vue/web/tooltip";
+
+// Svelte
+import Tooltip from "@ttdk-design-system/library-svelte/web/tooltip";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `text?` | `string` | `-` | Teks konten tooltip yang ditampilkan. |
+| `content?` | `any` | `-` | Konten kustom tooltip (JSX / VNode atau renderable content). |
+| `kbd?` | `string | string[]` | `-` | Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']). |
+| `placement?` | `TooltipPlacement` | `top` | Posisi penempatan tooltip terhadap elemen pemicu. |
+| `offsetDistance?` | `number` | `8` | Jarak offset dalam pixel dari elemen pemicu (trigger). |
+| `arrow?` | `boolean` | `true` | Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu. |
+| `openDelay?` | `number` | `150` | Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter). |
+| `closeDelay?` | `number` | `100` | Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave). |
+| `open?` | `boolean` | `-` | Status visibilitas tooltip terkontrol (controlled mode). |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal (uncontrolled initial state). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus. |
+| `ui?` | `TooltipUiProps` | `-` | Kustomisasi visual granular container utama (UiProps). |
+| `style?` | `any` | `-` | Style inline CSS native untuk wrapper luar. |
+| `className?` | `string` | `-` | Class CSS kustom untuk wrapper luar. |
+| `triggerClass?` | `string` | `-` | Class CSS kustom untuk pemicu (trigger container). |
+| `triggerStyle?` | `UiProps` | `-` | Style kustom untuk pemicu (trigger container) (UiProps). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk panel tooltip konten. |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk panel tooltip konten (UiProps). |
+| `arrowClass?` | `string` | `-` | Class CSS kustom untuk elemen panah (arrow). |
+| `arrowStyle?` | `UiProps` | `-` | Style kustom untuk elemen panah (arrow) (UiProps). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback saat status open berubah. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger) yang dibungkus oleh tooltip. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import React from "react";
+import Tooltip from "@ttdk-design-system/library-react/web/tooltip";
+import Button from "@ttdk-design-system/library-react/button";
+import "@ttdk-design-system/library-react/web/tooltip/tooltip.css";
+import "@ttdk-design-system/library-react/button/button.css";
+
+export function Example() {
+  return (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+        <Button variant="outline">Salin</Button>
+      </Tooltip>
+      <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+        <Button variant="primary">Kirim Resep</Button>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Tooltip from "@ttdk-design-system/library-vue/web/tooltip";
+import Button from "@ttdk-design-system/library-vue/button";
+import "@ttdk-design-system/library-vue/web/tooltip/tooltip.css";
+import "@ttdk-design-system/library-vue/button/button.css";
+</script>
+
+<template>
+  <div style="display: flex; gap: 16px; align-items: center;">
+    <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+      <Button variant="outline">Salin</Button>
+    </Tooltip>
+    <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+      <Button variant="primary">Kirim Resep</Button>
+    </Tooltip>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Tooltip from "@ttdk-design-system/library-svelte/web/tooltip";
+  import Button from "@ttdk-design-system/library-svelte/button";
+  import "@ttdk-design-system/library-svelte/web/tooltip/tooltip.css";
+  import "@ttdk-design-system/library-svelte/button/button.css";
+</script>
+
+<div style="display: flex; gap: 16px; align-items: center;">
+  <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+    <Button variant="outline">Salin</Button>
+  </Tooltip>
+  <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+    <Button variant="primary">Kirim Resep</Button>
+  </Tooltip>
+</div>
+```

package/src/web/tooltip/index.ts

@@ -0,0 +1,3 @@
+export { default } from './tooltip.vue';
+export { default as Tooltip } from './tooltip.vue';
+export * from './tooltip.vue';

package/src/web/tooltip/manifest.json

@@ -0,0 +1,222 @@
+{
+  "name": "@ttdk-design-system/tooltip",
+  "component": "Tooltip",
+  "folder": "tooltip",
+  "description": "Komponen Tooltip untuk menampilkan informasi kontekstual singkat saat pengguna mengarahkan kursor atau memfokuskan elemen pemicu.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "tooltip.css",
+      "importPath": "web/tooltip/tooltip.css"
+    }
+  ],
+  "props": {
+    "text": {
+      "name": "text",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks konten tooltip yang ditampilkan.",
+      "example": null,
+      "param": null
+    },
+    "content": {
+      "name": "content",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom tooltip (JSX / VNode atau renderable content).",
+      "example": null,
+      "param": null
+    },
+    "kbd": {
+      "name": "kbd",
+      "type": "string | string[]",
+      "optional": true,
+      "default": null,
+      "description": "Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']).",
+      "example": null,
+      "param": null
+    },
+    "placement": {
+      "name": "placement",
+      "type": "TooltipPlacement",
+      "optional": true,
+      "default": "top",
+      "description": "Posisi penempatan tooltip terhadap elemen pemicu.",
+      "example": null,
+      "param": null
+    },
+    "offsetDistance": {
+      "name": "offsetDistance",
+      "type": "number",
+      "optional": true,
+      "default": "8",
+      "description": "Jarak offset dalam pixel dari elemen pemicu (trigger).",
+      "example": null,
+      "param": null
+    },
+    "arrow": {
+      "name": "arrow",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu.",
+      "example": null,
+      "param": null
+    },
+    "openDelay": {
+      "name": "openDelay",
+      "type": "number",
+      "optional": true,
+      "default": "150",
+      "description": "Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter).",
+      "example": null,
+      "param": null
+    },
+    "closeDelay": {
+      "name": "closeDelay",
+      "type": "number",
+      "optional": true,
+      "default": "100",
+      "description": "Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave).",
+      "example": null,
+      "param": null
+    },
+    "open": {
+      "name": "open",
+      "type": "boolean",
+      "optional": true,
+      "default": null,
+      "description": "Status visibilitas tooltip terkontrol (controlled mode).",
+      "example": null,
+      "param": null
+    },
+    "defaultOpen": {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status visibilitas awal (uncontrolled initial state).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "TooltipUiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular container 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 (trigger container) (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "contentClass": {
+      "name": "contentClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk panel tooltip konten.",
+      "example": null,
+      "param": null
+    },
+    "contentStyle": {
+      "name": "contentStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk panel tooltip 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 (arrow) (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "onOpenChange": {
+      "name": "onOpenChange",
+      "type": "(open: boolean) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat status open berubah.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Elemen pemicu (trigger) yang dibungkus oleh tooltip.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/tooltip/tooltip.css

@@ -0,0 +1 @@
+.ttdk-tooltip-wrapper{box-sizing:border-box;font-family:var(--ttdk-font-sans);vertical-align:middle;display:inline-flex;position:relative}.ttdk-tooltip-trigger{box-sizing:border-box;color:inherit;cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;font-family:inherit;display:inline-flex}.ttdk-tooltip-trigger[data-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}.ttdk-tooltip-content{z-index:1000;box-sizing:border-box;background:var(--ttdk-ui-bg,var(--ttdk-color-neutral-900,#1f2328));width:max-content;max-width:280px;color:var(--ttdk-ui-color,var(--ttdk-color-neutral-white,#fff));border-radius:var(--ttdk-ui-radius,6px);font-family:var(--ttdk-font-sans);text-align:center;pointer-events:auto;user-select:none;will-change:transform, opacity;align-items:center;padding:5px 9px;font-size:12px;font-weight:500;line-height:16px;animation:.14s cubic-bezier(.16,1,.3,1) forwards ttdk-tooltip-fade-in;display:inline-flex;position:absolute;top:0;left:0;overflow:visible;box-shadow:0 4px 14px #00000038}.ttdk-tooltip-body{z-index:1;word-break:break-word;overflow-wrap:break-word;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:inline-flex;position:relative}.ttdk-tooltip-text{word-break:break-word;overflow-wrap:break-word;display:inline}.ttdk-tooltip-kbd-list{align-items:center;gap:3px;display:inline-flex}.ttdk-tooltip-kbd{box-sizing:border-box;min-width:16px;height:16px;color:inherit;text-transform:uppercase;background:#fff3;border-radius:3px;justify-content:center;align-items:center;padding:0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;font-weight:600;line-height:1;display:inline-flex}.ttdk-tooltip-arrow{background:inherit;z-index:0;pointer-events:none;box-sizing:border-box;width:8px;height:8px;position:absolute;transform:rotate(45deg)}@keyframes ttdk-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.dark .ttdk-tooltip-content,html.dark .ttdk-tooltip-content,[data-mode=dark] .ttdk-tooltip-content,[data-theme=dark] .ttdk-tooltip-content{background:var(--ttdk-ui-bg,var(--ttdk-color-neutral-800,#2c3035));color:var(--ttdk-ui-color,var(--ttdk-color-neutral-white,#f1f2f3));border:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26));box-shadow:0 6px 18px #00000073}.dark .ttdk-tooltip-content[data-side=top] .ttdk-tooltip-arrow,html.dark .ttdk-tooltip-content[data-side=top] .ttdk-tooltip-arrow,[data-mode=dark] .ttdk-tooltip-content[data-side=top] .ttdk-tooltip-arrow,[data-theme=dark] .ttdk-tooltip-content[data-side=top] .ttdk-tooltip-arrow{border-right:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26));border-bottom:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26))}.dark .ttdk-tooltip-content[data-side=bottom] .ttdk-tooltip-arrow,html.dark .ttdk-tooltip-content[data-side=bottom] .ttdk-tooltip-arrow,[data-mode=dark] .ttdk-tooltip-content[data-side=bottom] .ttdk-tooltip-arrow,[data-theme=dark] .ttdk-tooltip-content[data-side=bottom] .ttdk-tooltip-arrow{border-left:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26));border-top:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26))}.dark .ttdk-tooltip-content[data-side=left] .ttdk-tooltip-arrow,html.dark .ttdk-tooltip-content[data-side=left] .ttdk-tooltip-arrow,[data-mode=dark] .ttdk-tooltip-content[data-side=left] .ttdk-tooltip-arrow,[data-theme=dark] .ttdk-tooltip-content[data-side=left] .ttdk-tooltip-arrow{border-top:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26));border-right:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26))}.dark .ttdk-tooltip-content[data-side=right] .ttdk-tooltip-arrow,html.dark .ttdk-tooltip-content[data-side=right] .ttdk-tooltip-arrow,[data-mode=dark] .ttdk-tooltip-content[data-side=right] .ttdk-tooltip-arrow,[data-theme=dark] .ttdk-tooltip-content[data-side=right] .ttdk-tooltip-arrow{border-left:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26));border-bottom:1px solid var(--ttdk-ui-border-color,var(--ttdk-stroke-subtle,#ffffff26))}.dark .ttdk-tooltip-kbd,html.dark .ttdk-tooltip-kbd,[data-mode=dark] .ttdk-tooltip-kbd,[data-theme=dark] .ttdk-tooltip-kbd{background:#ffffff24}.ttdk-tooltip-content[style*="background: #fff"],.ttdk-tooltip-content[style*="background:#fff"],.ttdk-tooltip-content[style*="background: white"],.ttdk-tooltip-content[style*="background-color: #fff"],.ttdk-tooltip-content[style*="background-color:#fff"],.ttdk-tooltip-content[style*="background-color: white"],.ttdk-tooltip-content[style*="--ttdk-ui-background: #fff"],.ttdk-tooltip-content[style*="--ttdk-ui-background:#fff"],.ttdk-tooltip-content[style*="--ttdk-ui-background-color: #fff"],.ttdk-tooltip-content[style*="--ttdk-ui-background-color:#fff"]{color:var(--ttdk-ui-color,var(--ttdk-color-neutral-900,#1f2328));border:1px solid var(--ttdk-stroke-subtle,#0000001a)}.ttdk-tooltip-content[style*="background: #fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="background:#fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="background: white"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="background-color: #fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="background-color:#fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="background-color: white"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="--ttdk-ui-background: #fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="--ttdk-ui-background:#fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="--ttdk-ui-background-color: #fff"] .ttdk-tooltip-kbd,.ttdk-tooltip-content[style*="--ttdk-ui-background-color:#fff"] .ttdk-tooltip-kbd{color:var(--ttdk-color-neutral-900,#1f2328);background:#00000014;border:1px solid #0000001f}