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

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}

package/src/web/tooltip/tooltip.tsx

@@ -0,0 +1,423 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+
+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?: React.CSSProperties;
+
+  /**
+   * 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;
+}
+
+/**
+ * Komponen Tooltip untuk menampilkan informasi kontekstual singkat saat pengguna mengarahkan kursor atau memfokuskan elemen pemicu.
+ */
+
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Tooltip(props: TooltipProps) {
+  const triggerRef = useRef<any>(null);
+  const tooltipRef = useRef<any>(null);
+  const arrowRef = useRef<any>(null);
+  const [isOpen, setIsOpen] = useState(() =>
+    props.open !== undefined ? props.open : props.defaultOpen || false
+  );
+
+  const cleanupAutoUpdateRef = useRef<any>(null);
+
+  const openTimerRef = useRef<any>(null);
+
+  const closeTimerRef = useRef<any>(null);
+
+  function getKbdList() {
+    if (!props.kbd) return [];
+    if (Array.isArray(props.kbd)) return props.kbd;
+    return [props.kbd];
+  }
+
+  function clearTimers() {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }
+
+  function setOpen(value: boolean) {
+    if (props.disabled && value) return;
+    if (props.open === undefined) {
+      setIsOpen(value);
+    }
+    if (props.onOpenChange) {
+      props.onOpenChange(value);
+    }
+    if (value) {
+      setTimeout(() => {
+        startFloating();
+        updatePosition();
+      }, 0);
+    } else {
+      stopFloating();
+    }
+  }
+
+  function handlePointerEnter() {
+    if (props.disabled) return;
+    clearTimers();
+    const delay = props.openDelay !== undefined ? props.openDelay : 150;
+    if (delay <= 0) {
+      setOpen(true);
+    } else {
+      openTimerRef.current = setTimeout(() => {
+        setOpen(true);
+      }, delay);
+    }
+  }
+
+  function handlePointerLeave() {
+    clearTimers();
+    const delay = props.closeDelay !== undefined ? props.closeDelay : 100;
+    if (delay <= 0) {
+      setOpen(false);
+    } else {
+      closeTimerRef.current = setTimeout(() => {
+        setOpen(false);
+      }, delay);
+    }
+  }
+
+  function handleFocus() {
+    if (props.disabled) return;
+    clearTimers();
+    setOpen(true);
+  }
+
+  function handleBlur() {
+    clearTimers();
+    setOpen(false);
+  }
+
+  function handleKeyDown(e: any) {
+    if (e.key === "Escape" && isOpen) {
+      clearTimers();
+      setOpen(false);
+    }
+  }
+
+  function updatePosition() {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const targetPlacement = props.placement || "top";
+    const showArrow = props.arrow !== false;
+    const offsetDist =
+      props.offsetDistance !== undefined ? props.offsetDistance : 8;
+    const middleware: any[] = [
+      offset(offsetDist),
+      flip({
+        padding: 8,
+      }),
+      shift({
+        padding: 8,
+      }),
+    ];
+    if (showArrow && arrowRef.current) {
+      middleware.push(
+        floatingArrow({
+          element: arrowRef.current,
+          padding: 8,
+        })
+      );
+    }
+    computePosition(triggerRef.current, tooltipRef.current, {
+      placement: targetPlacement,
+      middleware,
+    }).then((data: any) => {
+      if (!tooltipRef.current) return;
+      tooltipRef.current.style.left = `${data.x}px`;
+      tooltipRef.current.style.top = `${data.y}px`;
+      const side = data.placement.split("-")[0];
+      tooltipRef.current.setAttribute("data-side", side);
+      tooltipRef.current.setAttribute("data-placement", data.placement);
+      if (
+        showArrow &&
+        arrowRef.current &&
+        data.middlewareData &&
+        data.middlewareData.arrow
+      ) {
+        const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+        const staticSide: any = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right",
+        }[side];
+        arrowRef.current.style.left = arrowX != null ? `${arrowX}px` : "";
+        arrowRef.current.style.top = arrowY != null ? `${arrowY}px` : "";
+        arrowRef.current.style.right = "";
+        arrowRef.current.style.bottom = "";
+        if (staticSide) {
+          arrowRef.current.style[staticSide] = "-4px";
+        }
+      }
+    });
+  }
+
+  function startFloating() {
+    stopFloating();
+    if (typeof window === "undefined") return;
+    if (triggerRef.current && tooltipRef.current) {
+      cleanupAutoUpdateRef.current = autoUpdate(
+        triggerRef.current,
+        tooltipRef.current,
+        () => {
+          updatePosition();
+        }
+      );
+    }
+  }
+
+  function stopFloating() {
+    if (typeof cleanupAutoUpdateRef.current === "function") {
+      cleanupAutoUpdateRef.current();
+      cleanupAutoUpdateRef.current = null;
+    }
+  }
+
+  useEffect(() => {
+    if (props.open !== undefined) {
+      setIsOpen(props.open);
+    }
+  }, [props.open]);
+
+  useEffect(() => {
+    if (isOpen) {
+      startFloating();
+      updatePosition();
+    } else {
+      stopFloating();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [props.placement, props.offsetDistance, props.arrow]);
+
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      stopFloating();
+    };
+  }, []);
+
+  return (
+    <div
+      className={`ttdk-tooltip-wrapper ${props.className || ""}`.trim()}
+      data-open={isOpen ? "true" : "false"}
+      data-disabled={props.disabled ? "true" : "false"}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <div
+        ref={triggerRef}
+        className={`ttdk-tooltip-trigger ${props.triggerClass || ""}`.trim()}
+        tabIndex={props.disabled ? -1 : 0}
+        aria-describedby={isOpen ? "ttdk-tooltip" : undefined}
+        data-open={isOpen ? "true" : "false"}
+        data-disabled={props.disabled ? "true" : "false"}
+        style={{
+          ...buildUiVars(props.triggerStyle),
+        }}
+        onPointerEnter={(event) => handlePointerEnter()}
+        onPointerLeave={(event) => handlePointerLeave()}
+        onFocus={(event) => handleFocus()}
+        onBlur={(event) => handleBlur()}
+        onKeyDown={(e) => handleKeyDown(e)}
+      >
+        {props.children ? <>{props.children}</> : null}
+      </div>
+      {isOpen ? (
+        <div
+          role="tooltip"
+          ref={tooltipRef}
+          className={`ttdk-tooltip-content ${props.contentClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.contentStyle),
+          }}
+          onPointerEnter={(event) => handlePointerEnter()}
+          onPointerLeave={(event) => handlePointerLeave()}
+        >
+          {props.arrow !== false ? (
+            <div
+              ref={arrowRef}
+              className={`ttdk-tooltip-arrow ${props.arrowClass || ""}`.trim()}
+              style={{
+                ...buildUiVars(props.arrowStyle),
+              }}
+            />
+          ) : null}
+          <div className="ttdk-tooltip-body">
+            {props.text ? (
+              <span className="ttdk-tooltip-text">{props.text}</span>
+            ) : null}
+            {props.content && !props.text ? <>{props.content}</> : null}
+            {!props.text && !props.content ? <>{props.content}</> : null}
+            {props.kbd ? (
+              <span className="ttdk-tooltip-kbd-list">
+                {getKbdList()?.map((key, idx) => (
+                  <kbd className="ttdk-tooltip-kbd" key={idx}>
+                    {key}
+                  </kbd>
+                ))}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Tooltip;
+
+export { Tooltip };