@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/components/Toast/Toast.variants.js

@@ -1,49 +1,101 @@
-import { t as a } from "../../dist-Bcn6lMQe.js";
-var t = a([
-  "rounded-md",
-  "p-4",
-  "flex",
-  "flex-row",
-  "relative",
+import { t as r } from "../../dist-B9GE4SXf.js";
+var t = r([
   "overflow-hidden",
-  "h-14",
-  "items-center",
-  "gap-8",
-  "data-[state=open]:animate-slide-in",
-  "data-[state=closed]:animate-hide",
-  "data-[swipe=move]:translate-x-4",
-  "data-[swipe=cancel]:translate-x-0",
-  "data-[swipe=end]:animate-swipe-out",
-  "text-white",
-  "shadow-[0px_2px_4px_0px_rgba(100,116,139,0.25)]"
+  "rounded-lg",
+  "inset-ring",
+  "inset-ring-transparent",
+  "shadow-[0px_2px_2px_0px_rgba(100,116,139,0.25)]",
+  "dark:bg-metal-950",
+  "dark:bg-linear-to-b",
+  "dark:shadow-[0px_2px_2px_0px_rgba(0,0,0,0.45)]"
 ], {
-  variants: { variant: {
-    success: ["bg-green-800"],
-    error: ["bg-red-800"],
-    warning: ["bg-amber-800"],
-    info: ["bg-blue-800"]
+  variants: { type: {
+    success: [
+      "bg-green-800",
+      "dark:from-green-600/10",
+      "dark:to-green-600/10",
+      "dark:inset-ring-green-600/20"
+    ],
+    error: [
+      "bg-red-800",
+      "dark:from-red-500/10",
+      "dark:to-red-500/10",
+      "dark:inset-ring-red-500/20"
+    ],
+    warning: [
+      "bg-amber-800",
+      "dark:from-yellow-400/10",
+      "dark:to-yellow-400/10",
+      "dark:inset-ring-yellow-400/20"
+    ],
+    info: [
+      "bg-blue-800",
+      "dark:from-blue-500/10",
+      "dark:to-blue-500/10",
+      "dark:inset-ring-blue-500/20"
+    ]
   } },
-  defaultVariants: { variant: "success" }
-}), r = a([
-  "fixed",
-  "bottom-0",
-  "right-0",
+  defaultVariants: { type: "info" }
+}), a = r([
+  "relative",
   "flex",
+  "min-h-14",
   "flex-col",
-  "p-[var(--viewport-padding)]",
-  "gap-8",
-  "w-[390px]",
-  "max-w-[100vw]",
-  "m-0",
-  "z-50",
-  "outline-none"
-]), i = a([
-  "w-4",
-  "h-4",
+  "justify-center",
+  "p-4"
+]), n = r([
+  "font-medium",
+  "tracking-normal",
   "text-white"
-]);
+], {
+  variants: { type: {
+    success: ["dark:text-green-300"],
+    error: ["dark:text-red-300"],
+    warning: ["dark:text-yellow-200"],
+    info: ["dark:text-blue-300"]
+  } },
+  defaultVariants: { type: "info" }
+}), i = r(["text-white/80"], {
+  variants: { type: {
+    success: ["dark:text-green-100"],
+    error: ["dark:text-red-200"],
+    warning: ["dark:text-yellow-100"],
+    info: ["dark:text-blue-200"]
+  } },
+  defaultVariants: { type: "info" }
+}), o = r(["shrink-0", "text-white"], {
+  variants: { type: {
+    success: ["dark:text-green-400"],
+    error: ["dark:text-red-400"],
+    warning: ["dark:text-yellow-300"],
+    info: ["dark:text-blue-400"]
+  } },
+  defaultVariants: { type: "info" }
+}), s = r([
+  "relative",
+  "shrink-0",
+  "cursor-pointer",
+  "text-white",
+  "tap-target",
+  "touch-hit-area",
+  "rounded",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500"
+], {
+  variants: { type: {
+    success: ["dark:text-green-300"],
+    error: ["dark:text-red-300"],
+    warning: ["dark:text-yellow-200"],
+    info: ["dark:text-blue-300"]
+  } },
+  defaultVariants: { type: "info" }
+});
 export {
-  i as closeToastVariants,
-  t as toastVariants,
-  r as viewportToastVariants
+  s as toastCloseButtonVariants,
+  i as toastDescriptionVariants,
+  t as toastFrameVariants,
+  o as toastIconVariants,
+  n as toastTitleVariants,
+  a as toastVariants
 };

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,19 @@
+"use client";
+import { ToastStoreContext as s } from "./contexts/toast-store.context.js";
+import { createToastStore as i } from "./store/create-toast-store.js";
+import { useState as m } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var p = ({ children: r, duration: t, limit: o, store: e }) => {
+  const [a] = m(() => e ?? i({
+    duration: t,
+    limit: o
+  }));
+  return /* @__PURE__ */ n(s.Provider, {
+    value: a,
+    children: r
+  });
+};
+p.displayName = "KonstructToastProvider";
+export {
+  p as ToastProvider
+};

package/dist/components/Toast/components/ToastCard/ToastCard.js

@@ -0,0 +1,121 @@
+import { t as k } from "../../../../x-C8O1IsaM.js";
+import { Typography as I } from "../../../Typography/Typography.js";
+import { t as i } from "../../../../utils-DnIJruo0.js";
+import { COLLAPSED_SCALE_STEP as G, DEFAULT_TOAST_DURATION as K, REDUCED_MOTION_DRAG_TRANSITION as M, TOAST_ENTER_TRANSITION as W, TOAST_EXIT_TRANSITION as $, TOAST_ICONS as q, TOAST_TRANSITION as J } from "../../constants/index.js";
+import { useToastTimer as Q } from "../../hooks/useToastTimer/useToastTimer.js";
+import { toastCloseButtonVariants as Y, toastDescriptionVariants as Z, toastFrameVariants as H, toastIconVariants as tt, toastTitleVariants as at, toastVariants as et } from "../../Toast.variants.js";
+import { shouldDismissSwipe as rt } from "../../utils/should-dismiss-swipe/should-dismiss-swipe.js";
+import { useEffect as st, useRef as O, useState as A } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { motion as _, usePresence as it } from "motion/react";
+var ot = ({ autoWidth: w, closeLabel: D, expanded: c, frontHeight: f, index: l, offset: E, reducedMotion: u, restartOnLeave: v, resumeDelay: R, toast: b, total: C, visible: m, onDismiss: p, onExited: V, onHeightChange: T }) => {
+  const [z, N] = A(!1), [h, L] = A(0), g = O(null), y = O(null), [P] = it(), { description: o, duration: U = K, id: d, showCloseButton: j = !0, title: B, type: a = "info" } = b;
+  Q({
+    duration: U,
+    paused: c || z,
+    restart: v,
+    resumeDelay: R,
+    onExpire: p
+  }), st(() => {
+    const e = y.current;
+    if (!e) return;
+    const r = () => {
+      T(d, e.offsetHeight);
+    };
+    r();
+    const s = new ResizeObserver(r);
+    return s.observe(e), () => {
+      s.disconnect();
+    };
+  }, [d, T]);
+  const F = (e, { offset: r, velocity: s }) => {
+    N(!1), rt({
+      offset: r.x,
+      velocity: s.x,
+      width: g.current?.offsetWidth ?? 0
+    }) && (L(Math.sign(r.x || s.x)), p());
+  }, X = q[a], x = !c && l !== 0 && f !== 0, S = u ? { duration: 0 } : {
+    ...J,
+    x: W,
+    opacity: $
+  };
+  return /* @__PURE__ */ t(_.li, {
+    ref: g,
+    className: i("absolute right-0 bottom-0 origin-bottom touch-pan-y will-change-transform", w ? "w-max max-w-[calc(100vw-3rem)]" : "max-w-full", H({ type: a })),
+    style: { zIndex: P ? C - l : 0 },
+    initial: {
+      x: "110%",
+      opacity: 1,
+      y: 0,
+      scale: 1
+    },
+    animate: {
+      x: 0,
+      opacity: m ? 1 : 0,
+      y: -E,
+      scale: c ? 1 : 1 - l * G,
+      height: x ? f : "auto"
+    },
+    exit: h ? {
+      opacity: 0,
+      x: `${h * 110}%`
+    } : { opacity: 0 },
+    transition: S,
+    drag: m ? "x" : !1,
+    dragSnapToOrigin: !0,
+    dragTransition: u ? M : void 0,
+    onDragStart: () => {
+      N(!0);
+    },
+    onDragEnd: F,
+    onAnimationComplete: (e) => {
+      e === "exit" && V(d);
+    },
+    "aria-hidden": !m,
+    children: /* @__PURE__ */ n("div", {
+      ref: y,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: et(),
+      children: [/* @__PURE__ */ n("div", {
+        className: "flex items-center gap-8",
+        children: [/* @__PURE__ */ n("div", {
+          className: "flex min-w-0 flex-1 items-center gap-2",
+          children: [/* @__PURE__ */ t(X, {
+            size: o ? 20 : 24,
+            className: i(tt({ type: a }))
+          }), /* @__PURE__ */ t(I, {
+            variant: o ? "body2" : "body1",
+            className: i("min-w-0", at({ type: a })),
+            children: B
+          })]
+        }), j ? /* @__PURE__ */ n("button", {
+          type: "button",
+          className: i(Y({ type: a })),
+          onClick: p,
+          children: [/* @__PURE__ */ t(k, {
+            className: "size-5",
+            "aria-hidden": !0
+          }), /* @__PURE__ */ t("span", {
+            className: "sr-only",
+            children: D
+          })]
+        }) : null]
+      }), o ? /* @__PURE__ */ t(_.div, {
+        className: "pl-7",
+        animate: { opacity: x ? 0 : 1 },
+        transition: S,
+        children: /* @__PURE__ */ t(I, {
+          variant: "body2",
+          className: i(Z({ type: a })),
+          children: o
+        })
+      }) : null]
+    })
+  });
+};
+ot.displayName = "KonstructToastCard";
+export {
+  ot as ToastCard
+};

package/dist/components/Toast/components/index.js

@@ -0,0 +1,4 @@
+import { ToastCard as r } from "./ToastCard/ToastCard.js";
+export {
+  r as ToastCard
+};

package/dist/components/Toast/constants/index.js

@@ -0,0 +1,41 @@
+import { CheckCircleFilledIcon as T } from "../../../assets/icons/components/CheckCircleFilled.js";
+import { ErrorIcon as r } from "../../../assets/icons/components/Error.js";
+import { InformationFilledIcon as S } from "../../../assets/icons/components/InformationFilled.js";
+import { WarningTriangleIcon as I } from "../../../assets/icons/components/WarningTriangle.js";
+var e = 3e3, E = 5, i = 300, o = 3, O = 12, s = 0.05, D = 12, v = {
+  type: "spring",
+  stiffness: 320,
+  damping: 32,
+  mass: 0.9
+}, N = {
+  type: "spring",
+  stiffness: 260,
+  damping: 26
+}, m = {
+  duration: 0.15,
+  ease: "easeOut"
+}, t = {
+  success: T,
+  error: r,
+  warning: I,
+  info: S
+}, f = 0.4, p = 500, L = {
+  bounceStiffness: 1e6,
+  bounceDamping: 1e7
+};
+export {
+  s as COLLAPSED_SCALE_STEP,
+  O as COLLAPSED_STEP_PX,
+  o as DEFAULT_MAX_VISIBLE_TOASTS,
+  e as DEFAULT_TOAST_DURATION,
+  E as DEFAULT_TOAST_LIMIT,
+  D as EXPANDED_GAP_PX,
+  L as REDUCED_MOTION_DRAG_TRANSITION,
+  f as SWIPE_DISMISS_DISTANCE_RATIO,
+  p as SWIPE_DISMISS_VELOCITY,
+  i as TOAST_DISMISS_STAGGER_MS,
+  N as TOAST_ENTER_TRANSITION,
+  m as TOAST_EXIT_TRANSITION,
+  t as TOAST_ICONS,
+  v as TOAST_TRANSITION
+};

package/dist/components/Toast/contexts/index.js

@@ -0,0 +1,4 @@
+import { ToastStoreContext as t } from "./toast-store.context.js";
+export {
+  t as ToastStoreContext
+};

package/dist/components/Toast/contexts/toast-store.context.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+var e = t(null);
+export {
+  e as ToastStoreContext
+};

package/dist/components/Toast/hooks/index.js

@@ -0,0 +1,15 @@
+import { useStackExpansion as r } from "./useStackExpansion/useStackExpansion.js";
+import { useToast as s } from "./useToast/useToast.js";
+import { useToastHeights as m } from "./useToastHeights/useToastHeights.js";
+import { useToastSource as p } from "./useToastSource/useToastSource.js";
+import { useToastStore as u, useToastStoreApi as T } from "./useToastStore/useToastStore.js";
+import { useToastTimer as S } from "./useToastTimer/useToastTimer.js";
+export {
+  r as useStackExpansion,
+  s as useToast,
+  m as useToastHeights,
+  p as useToastSource,
+  u as useToastStore,
+  T as useToastStoreApi,
+  S as useToastTimer
+};

package/dist/components/Toast/hooks/useStackExpansion/useStackExpansion.js

@@ -0,0 +1,45 @@
+import { useEffect as s, useRef as p, useState as f } from "react";
+var v = () => {
+  const [t, r] = f(!1), i = p(null), o = () => {
+    r(!0);
+  }, n = () => {
+    r(!1);
+  }, a = (e) => {
+    e.pointerType === "mouse" && o();
+  }, d = (e) => {
+    e.pointerType === "mouse" && n();
+  }, u = (e) => {
+    e.pointerType !== "mouse" && o();
+  }, c = (e) => {
+    e.currentTarget.contains(e.relatedTarget) || n();
+  };
+  return s(() => {
+    const e = () => {
+      document.hidden && n();
+    };
+    return window.addEventListener("blur", n), document.addEventListener("visibilitychange", e), () => {
+      window.removeEventListener("blur", n), document.removeEventListener("visibilitychange", e);
+    };
+  }, []), s(() => {
+    if (!t) return;
+    const e = (l) => {
+      i.current?.contains(l.target) || n();
+    };
+    return document.addEventListener("pointerdown", e), () => {
+      document.removeEventListener("pointerdown", e);
+    };
+  }, [t]), {
+    expanded: t,
+    regionRef: i,
+    regionHandlers: {
+      onPointerEnter: a,
+      onPointerLeave: d,
+      onPointerDown: u,
+      onFocus: o,
+      onBlur: c
+    }
+  };
+};
+export {
+  v as useStackExpansion
+};

package/dist/components/Toast/hooks/useToast/useToast.js

@@ -0,0 +1,17 @@
+import { useToastStoreApi as o } from "../useToastStore/useToastStore.js";
+import { useMemo as r } from "react";
+var m = () => {
+  const t = o();
+  return r(() => ({
+    addToast: (e) => t.getState().add(e),
+    removeToast: (e) => {
+      t.getState().remove(e);
+    },
+    clearAllToasts: () => {
+      t.getState().clear();
+    }
+  }), [t]);
+};
+export {
+  m as useToast
+};

package/dist/components/Toast/hooks/useToastHeights/useToastHeights.js

@@ -0,0 +1,23 @@
+import { useCallback as n, useState as h } from "react";
+var o = () => {
+  const [a, s] = h({});
+  return {
+    heights: a,
+    setHeight: n((e, t) => {
+      s((r) => r[e] === t ? r : {
+        ...r,
+        [e]: t
+      });
+    }, []),
+    removeHeight: n((e) => {
+      s((t) => {
+        if (!(e in t)) return t;
+        const { [e]: r, ...g } = t;
+        return g;
+      });
+    }, [])
+  };
+};
+export {
+  o as useToastHeights
+};

package/dist/components/Toast/hooks/useToastSource/useToastSource.js

@@ -0,0 +1,15 @@
+import { useToastStoreApi as n } from "../useToastStore/useToastStore.js";
+import { useSyncExternalStore as u } from "react";
+var m = ({ toasts: o, onDismiss: r }) => {
+  const t = n(), e = () => t.getState().toasts, s = u(t.subscribe, e, e);
+  return {
+    toasts: o ?? s,
+    configure: t.configure,
+    dismiss: r ?? ((a) => {
+      t.getState().remove(a);
+    })
+  };
+};
+export {
+  m as useToastSource
+};

package/dist/components/Toast/hooks/useToastStore/useToastStore.js

@@ -0,0 +1,11 @@
+import { ToastStoreContext as e } from "../../contexts/toast-store.context.js";
+import { defaultToastStore as o } from "../../store/default-toast-store.js";
+import { useContext as s, useSyncExternalStore as a } from "react";
+var u = () => s(e) ?? o, i = (r) => {
+  const t = u();
+  return a(t.subscribe, () => r(t.getState()), () => r(t.getState()));
+};
+export {
+  i as useToastStore,
+  u as useToastStoreApi
+};

package/dist/components/Toast/hooks/useToastTimer/useToastTimer.js

@@ -0,0 +1,26 @@
+import { useEffect as a, useRef as e } from "react";
+var h = ({ duration: t, paused: u, restart: s, resumeDelay: r, onExpire: n }) => {
+  const c = e(t), o = e(!1), f = e(n), m = e(r);
+  a(() => {
+    f.current = n, m.current = r;
+  }, [n, r]), a(() => {
+    if (u) {
+      o.current = !0;
+      return;
+    }
+    if (t <= 0) return;
+    const i = o.current, R = s ? t + (i ? m.current : 0) : c.current, w = Date.now(), T = setTimeout(() => {
+      f.current();
+    }, R);
+    return () => {
+      clearTimeout(T), c.current = Math.max(0, c.current - (Date.now() - w));
+    };
+  }, [
+    u,
+    t,
+    s
+  ]);
+};
+export {
+  h as useToastTimer
+};

package/dist/components/Toast/store/create-toast-store.js

@@ -0,0 +1,46 @@
+import "../constants/index.js";
+var l = 0, c = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : (l += 1, `toast-${Date.now()}-${l}`), m = (d = {}) => {
+  const a = /* @__PURE__ */ new Set();
+  let n = d.duration ?? 3e3, r = d.limit ?? 5;
+  const s = (t) => {
+    const o = e;
+    e = {
+      ...e,
+      toasts: t
+    }, a.forEach((i) => {
+      i(e, o);
+    });
+  };
+  let e = {
+    toasts: [],
+    add: (t) => {
+      const o = {
+        ...t,
+        id: c(),
+        type: t.type ?? "info",
+        duration: t.duration ?? n,
+        showCloseButton: t.showCloseButton ?? !0
+      };
+      return s([...e.toasts, o].slice(-r)), o.id;
+    },
+    remove: (t) => {
+      const o = e.toasts.filter((i) => i.id !== t);
+      o.length !== e.toasts.length && s(o);
+    },
+    clear: () => {
+      e.toasts.length > 0 && s([]);
+    }
+  };
+  return {
+    configure: (t) => {
+      n = t.duration ?? n, r = t.limit ?? r, e.toasts.length > r && s(e.toasts.slice(-r));
+    },
+    getState: () => e,
+    subscribe: (t) => (a.add(t), () => {
+      a.delete(t);
+    })
+  };
+};
+export {
+  m as createToastStore
+};

package/dist/components/Toast/store/default-toast-store.js

@@ -0,0 +1,5 @@
+import { createToastStore as t } from "./create-toast-store.js";
+var r = t();
+export {
+  r as defaultToastStore
+};

package/dist/components/Toast/store/index.js

@@ -0,0 +1,6 @@
+import { createToastStore as t } from "./create-toast-store.js";
+import { defaultToastStore as e } from "./default-toast-store.js";
+export {
+  t as createToastStore,
+  e as defaultToastStore
+};

package/dist/components/Toast/utils/compute-stack-layout/compute-stack-layout.js

@@ -0,0 +1,24 @@
+import "../../constants/index.js";
+var P = ({ expanded: a, heights: o, maxVisible: c, toasts: t }) => {
+  const i = t[0], e = i ? o[i.id] ?? 0 : 0;
+  if (!a) {
+    const n = Math.min(t.length - 1, c - 1);
+    return {
+      offsets: t.map((f, m) => m * 12),
+      frontHeight: e,
+      regionHeight: Math.max(0, e + n * 12)
+    };
+  }
+  let r = 0;
+  return {
+    offsets: t.map((n) => {
+      const f = r;
+      return r += (o[n.id] ?? 0) + 12, f;
+    }),
+    frontHeight: e,
+    regionHeight: Math.max(0, r - 12)
+  };
+};
+export {
+  P as computeStackLayout
+};

package/dist/components/Toast/utils/index.js

@@ -0,0 +1,6 @@
+import { computeStackLayout as m } from "./compute-stack-layout/compute-stack-layout.js";
+import { shouldDismissSwipe as i } from "./should-dismiss-swipe/should-dismiss-swipe.js";
+export {
+  m as computeStackLayout,
+  i as shouldDismissSwipe
+};

package/dist/components/Toast/utils/should-dismiss-swipe/should-dismiss-swipe.js

@@ -0,0 +1,5 @@
+import "../../constants/index.js";
+var i = ({ offset: S, velocity: I, width: r }) => Math.abs(I) > 500 ? Math.sign(I) === Math.sign(S) || S === 0 : r > 0 && Math.abs(S) > r * 0.4;
+export {
+  i as shouldDismissSwipe
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,18 +1,34 @@
-import { t as p } from "../../utils-COaoD3PI.js";
-import { a as c, i as h, n as x, o as f, r as g, t as w } from "../../dist-BeLV4B_x.js";
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-var C = ({ content: t, children: e, side: s = "top", sideOffset: o = 4, bgClassName: i = "bg-slate-700", arrowClassName: l = "fill-slate-700", textClassName: n = "text-white", className: d, delayDuration: m = 0 }) => /* @__PURE__ */ r(h, {
-  delayDuration: m,
-  children: /* @__PURE__ */ a(c, { children: [/* @__PURE__ */ r(f, {
-    asChild: !0,
-    children: /* @__PURE__ */ r("span", { children: e })
-  }), /* @__PURE__ */ r(g, { children: /* @__PURE__ */ a(x, {
-    side: s,
-    sideOffset: o,
-    className: p("rounded px-2 py-1 text-xs shadow-md", "animate-in fade-in-0", i, n, d),
-    children: [t, /* @__PURE__ */ r(w, { className: l })]
-  }) })] })
-});
+import { a as w, i as C, n as b, o as j, r as O, t as P } from "../../dist-DsOk4psA.js";
+import { t } from "../../utils-DnIJruo0.js";
+import { useState as y } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+var k = ({ content: o, children: i, asOverlay: r = !1, disabled: a = !1, overlayClassName: n, overlayLabel: p, wrapperClassName: m, side: d = "top", sideOffset: c = 4, bgClassName: f = "bg-slate-700", arrowClassName: h = "fill-slate-700", textClassName: g = "text-white", className: T, delayDuration: u = 0 }) => {
+  const [x, v] = y(!1), N = r ? /* @__PURE__ */ e("span", {
+    role: "img",
+    "aria-label": p ?? (typeof o == "string" ? o : void 0),
+    hidden: a,
+    className: t("absolute cursor-help", n ?? "inset-0")
+  }) : /* @__PURE__ */ e("span", { children: i }), l = /* @__PURE__ */ e(w, {
+    delayDuration: u,
+    children: /* @__PURE__ */ s(P, {
+      open: !a && x,
+      onOpenChange: v,
+      children: [/* @__PURE__ */ e(j, {
+        asChild: !0,
+        children: N
+      }), /* @__PURE__ */ e(C, { children: /* @__PURE__ */ s(O, {
+        side: d,
+        sideOffset: c,
+        className: t("rounded px-2 py-1 text-xs shadow-md", "animate-in fade-in-0", f, g, T),
+        children: [o, /* @__PURE__ */ e(b, { className: h })]
+      }) })]
+    })
+  });
+  return r ? /* @__PURE__ */ s("div", {
+    className: t("relative", m),
+    children: [i, l]
+  }) : l;
+};
 export {
-  C as Tooltip
+  k as Tooltip
 };