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

package/dist/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/dist/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}

package/dist/web/tooltip/tooltip.svelte

@@ -0,0 +1,292 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount, tick } from "svelte";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+export let open = void 0;
+export let defaultOpen = void 0;
+export let kbd = void 0;
+export let disabled = void 0;
+export let onOpenChange = void 0;
+export let openDelay = void 0;
+export let closeDelay = void 0;
+export let placement = void 0;
+export let arrow = void 0;
+export let offsetDistance = void 0;
+export let className = void 0;
+export let ui = void 0;
+export let triggerClass = void 0;
+export let triggerStyle = void 0;
+export let contentClass = void 0;
+export let contentStyle = void 0;
+export let arrowClass = void 0;
+export let arrowStyle = void 0;
+export let text = void 0;
+export let content = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function getKbdList() {
+  if (!kbd)
+    return [];
+  if (Array.isArray(kbd))
+    return kbd;
+  return [kbd];
+}
+function clearTimers() {
+  if (openTimer) {
+    clearTimeout(openTimer);
+    openTimer = null;
+  }
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = null;
+  }
+}
+function setOpen(value) {
+  if (disabled && value)
+    return;
+  if (open === void 0) {
+    isOpen = value;
+  }
+  if (onOpenChange) {
+    onOpenChange(value);
+  }
+  if (value) {
+    tick().then(() => {
+      startFloating();
+      updatePosition();
+    });
+  } else {
+    stopFloating();
+  }
+}
+function handlePointerEnter() {
+  if (disabled)
+    return;
+  clearTimers();
+  const delay = openDelay !== void 0 ? openDelay : 150;
+  if (delay <= 0) {
+    setOpen(true);
+  } else {
+    openTimer = setTimeout(() => {
+      setOpen(true);
+    }, delay);
+  }
+}
+function handlePointerLeave() {
+  clearTimers();
+  const delay = closeDelay !== void 0 ? closeDelay : 100;
+  if (delay <= 0) {
+    setOpen(false);
+  } else {
+    closeTimer = setTimeout(() => {
+      setOpen(false);
+    }, delay);
+  }
+}
+function handleFocus() {
+  if (disabled)
+    return;
+  clearTimers();
+  setOpen(true);
+}
+function handleBlur() {
+  clearTimers();
+  setOpen(false);
+}
+function handleKeyDown(e) {
+  if (e.key === "Escape" && isOpen) {
+    clearTimers();
+    setOpen(false);
+  }
+}
+function updatePosition() {
+  if (!triggerRef || !tooltipRef)
+    return;
+  const targetPlacement = placement || "top";
+  const showArrow = arrow !== false;
+  const offsetDist = offsetDistance !== void 0 ? offsetDistance : 8;
+  const middleware = [
+    offset(offsetDist),
+    flip({
+      padding: 8
+    }),
+    shift({
+      padding: 8
+    })
+  ];
+  if (showArrow && arrowRef) {
+    middleware.push(
+      floatingArrow({
+        element: arrowRef,
+        padding: 8
+      })
+    );
+  }
+  computePosition(triggerRef, tooltipRef, {
+    placement: targetPlacement,
+    middleware
+  }).then((data) => {
+    if (!tooltipRef)
+      return;
+    tooltipRef.style.left = `${data.x}px`;
+    tooltipRef.style.top = `${data.y}px`;
+    const side = data.placement.split("-")[0];
+    tooltipRef.setAttribute("data-side", side);
+    tooltipRef.setAttribute("data-placement", data.placement);
+    if (showArrow && arrowRef && data.middlewareData && data.middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[side];
+      arrowRef.style.left = arrowX != null ? `${arrowX}px` : "";
+      arrowRef.style.top = arrowY != null ? `${arrowY}px` : "";
+      arrowRef.style.right = "";
+      arrowRef.style.bottom = "";
+      if (staticSide) {
+        arrowRef.style[staticSide] = "-4px";
+      }
+    }
+  });
+}
+function startFloating() {
+  stopFloating();
+  if (typeof window === "undefined")
+    return;
+  if (triggerRef && tooltipRef) {
+    cleanupAutoUpdate = autoUpdate(triggerRef, tooltipRef, () => {
+      updatePosition();
+    });
+  }
+}
+function stopFloating() {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+let triggerRef;
+let tooltipRef;
+let arrowRef;
+let isOpen = open !== void 0 ? open : defaultOpen || false;
+let cleanupAutoUpdate = null;
+let openTimer = null;
+let closeTimer = null;
+onMount(() => {
+  if (open !== void 0) {
+    isOpen = open;
+  }
+  if (isOpen) {
+    setTimeout(() => {
+      startFloating();
+      updatePosition();
+    }, 0);
+  }
+});
+onDestroy(() => {
+  clearTimers();
+  stopFloating();
+});
+</script>
+
+<div
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-tooltip-wrapper ${className || ""}`.trim()}
+  data-open={isOpen ? "true" : "false"}
+  data-disabled={disabled ? "true" : "false"}
+>
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(triggerStyle),
+    })}
+    bind:this={triggerRef}
+    class={`ttdk-tooltip-trigger ${triggerClass || ""}`.trim()}
+    tabIndex={disabled ? -1 : 0}
+    aria-describedby={isOpen ? "ttdk-tooltip" : undefined}
+    data-open={isOpen ? "true" : "false"}
+    data-disabled={disabled ? "true" : "false"}
+    on:pointerenter={(event) => {
+      handlePointerEnter();
+    }}
+    on:pointerleave={(event) => {
+      handlePointerLeave();
+    }}
+    on:focus={(event) => {
+      handleFocus();
+    }}
+    on:blur={(event) => {
+      handleBlur();
+    }}
+    on:keydown={(e) => {
+      handleKeyDown(e);
+    }}
+  >
+    {#if $$slots.default}
+      <slot />
+    {/if}
+  </div>
+  {#if isOpen}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(contentStyle),
+      })}
+      role="tooltip"
+      bind:this={tooltipRef}
+      class={`ttdk-tooltip-content ${contentClass || ""}`.trim()}
+      on:pointerenter={(event) => {
+        handlePointerEnter();
+      }}
+      on:pointerleave={(event) => {
+        handlePointerLeave();
+      }}
+    >
+      {#if arrow !== false}
+        <div
+          style={stringifyStyles({
+            ...buildUiVars(arrowStyle),
+          })}
+          bind:this={arrowRef}
+          class={`ttdk-tooltip-arrow ${arrowClass || ""}`.trim()}
+        />
+      {/if}
+      <div class="ttdk-tooltip-body">
+        {#if text}
+          <span class="ttdk-tooltip-text">{text}</span>
+        {/if}
+        {#if content && !text}
+          {content}
+        {/if}
+        {#if !text && !content}
+          <slot name="content" />
+        {/if}
+        {#if kbd}
+          <span class="ttdk-tooltip-kbd-list">
+            {#each getKbdList() as key, idx (idx)}
+              <kbd class="ttdk-tooltip-kbd">{key}</kbd>
+            {/each}
+          </span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/web/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,140 @@
+import { SvelteComponent } from "svelte";
+export type TooltipPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export type TooltipUiProps = UiProps;
+export interface TooltipProps {
+    /**
+     * Teks konten tooltip yang ditampilkan.
+     */
+    text?: string;
+    /**
+     * Konten kustom tooltip (JSX / VNode atau renderable content).
+     */
+    content?: any;
+    /**
+     * Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']).
+     */
+    kbd?: string | string[];
+    /**
+     * Posisi penempatan tooltip terhadap elemen pemicu.
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Jarak offset dalam pixel dari elemen pemicu (trigger).
+     * @default 8
+     */
+    offsetDistance?: number;
+    /**
+     * Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu.
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter).
+     * @default 150
+     */
+    openDelay?: number;
+    /**
+     * Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave).
+     * @default 100
+     */
+    closeDelay?: number;
+    /**
+     * Status visibilitas tooltip terkontrol (controlled mode).
+     */
+    open?: boolean;
+    /**
+     * Status visibilitas awal (uncontrolled initial state).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Kustomisasi visual granular container utama (UiProps).
+     */
+    ui?: TooltipUiProps;
+    /**
+     * Style inline CSS native untuk wrapper luar.
+     */
+    style?: any;
+    /**
+     * Class CSS kustom untuk wrapper luar.
+     */
+    className?: string;
+    /**
+     * Class CSS kustom untuk pemicu (trigger container).
+     */
+    triggerClass?: string;
+    /**
+     * Style kustom untuk pemicu (trigger container) (UiProps).
+     */
+    triggerStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk panel tooltip konten.
+     */
+    contentClass?: string;
+    /**
+     * Style kustom untuk panel tooltip konten (UiProps).
+     */
+    contentStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen panah (arrow).
+     */
+    arrowClass?: string;
+    /**
+     * Style kustom untuk elemen panah (arrow) (UiProps).
+     */
+    arrowStyle?: UiProps;
+    /**
+     * Callback saat status open berubah.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Elemen pemicu (trigger) yang dibungkus oleh tooltip.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        open?: TooltipProps["open"];
+        defaultOpen?: TooltipProps["defaultOpen"];
+        kbd?: TooltipProps["kbd"];
+        disabled?: TooltipProps["disabled"];
+        onOpenChange?: TooltipProps["onOpenChange"];
+        openDelay?: TooltipProps["openDelay"];
+        closeDelay?: TooltipProps["closeDelay"];
+        placement?: TooltipProps["placement"];
+        arrow?: TooltipProps["arrow"];
+        offsetDistance?: TooltipProps["offsetDistance"];
+        className?: TooltipProps["className"];
+        ui?: TooltipProps["ui"];
+        triggerClass?: TooltipProps["triggerClass"];
+        triggerStyle?: TooltipProps["triggerStyle"];
+        contentClass?: TooltipProps["contentClass"];
+        contentStyle?: TooltipProps["contentStyle"];
+        arrowClass?: TooltipProps["arrowClass"];
+        arrowStyle?: TooltipProps["arrowStyle"];
+        text?: TooltipProps["text"];
+        content?: TooltipProps["content"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        content: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TooltipProps_ = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps_, TooltipEvents, TooltipSlots> {
+}
+export {};