@jirawatpyk/aura-react 4.7.2 → 4.9.0

package/dist/esm/Select.js

@@ -0,0 +1,48 @@
+'use client';
+import * as React from "react";
+import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, omit, uid } from "./internal.js";
+const h = React.createElement;
+const Select = React.forwardRef(function Select2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS.concat(["children"]));
+  const opts = (props.options || []).map(function(o) {
+    const v = typeof o === "object" ? o : { value: o, label: o };
+    return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+  });
+  if (props.placeholder)
+    opts.unshift(
+      /* @__PURE__ */ React.createElement("option", { key: "__ph", value: "", disabled: true }, props.placeholder)
+    );
+  const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
+      "select",
+      Object.assign(extra, rest, {
+        ref,
+        id,
+        className: "aura-input__control",
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }),
+      opts,
+      props.children
+    ), /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-select__chevron" }))
+  );
+});
+export {
+  Select
+};

package/dist/esm/SideNav.js

@@ -0,0 +1,36 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+const SideNav = React.forwardRef(function SideNav2(props, ref) {
+  const t = useStrings();
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue,
+    props.onChange
+  );
+  function item(it) {
+    const on = st[0] === it.id;
+    const inner = [
+      it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : null,
+      /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
+      it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
+    ];
+    const common = {
+      className: cx("aura-nav__item", on && "is-active"),
+      "aria-current": on ? "page" : void 0,
+      onClick: function(e) {
+        if (!it.href) e.preventDefault();
+        st[1](it.id);
+      }
+    };
+    return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
+  }
+  return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
+    return /* @__PURE__ */ React.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
+  })), props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
+});
+export {
+  SideNav
+};

package/dist/esm/Skeleton.js

@@ -0,0 +1,29 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const Skeleton = React.forwardRef(function Skeleton2(props, ref) {
+  const v = props.variant || "text";
+  if (v === "text" && (props.lines || 1) > 1) {
+    const n = props.lines, rows = [];
+    for (let i = 0; i < n; i++)
+      rows.push(/* @__PURE__ */ React.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n - 1 ? "60%" : "100%" } }));
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref,
+        className: cx("aura-skel-lines", props.className),
+        "aria-hidden": true,
+        style: props.width ? { width: props.width } : void 0
+      },
+      rows
+    );
+  }
+  const style = { width: props.width, height: props.height };
+  if (v === "circle") {
+    style.width = style.height = props.size || props.width || 40;
+  }
+  return /* @__PURE__ */ React.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
+});
+export {
+  Skeleton
+};

package/dist/esm/Stack.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+import { respVars, space } from "./responsive.js";
+const h = React.createElement;
+const Stack = React.forwardRef(function Stack2(props, ref) {
+  const style = Object.assign(
+    {},
+    respVars("aura-stack-dir", props.direction || "column"),
+    respVars("aura-stack-gap", props.gap == null ? 4 : props.gap, space),
+    respVars("aura-stack-align", props.align || "stretch"),
+    props.justify ? { justifyContent: props.justify } : null,
+    props.wrap ? { flexWrap: "wrap" } : null,
+    props.style
+  );
+  return h(props.as || "div", { ref, className: cx("aura-stack", props.className), style }, props.children);
+});
+export {
+  Stack
+};

package/dist/esm/Stepper.js

@@ -0,0 +1,54 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Stepper = React.forwardRef(function Stepper2(props, ref) {
+  const t = useStrings();
+  const steps = props.steps || [];
+  let at = -1;
+  steps.forEach(function(s, i) {
+    if (s.id === props.current) at = i;
+  });
+  if (at < 0) at = 0;
+  const vertical = props.orientation === "vertical";
+  const cur = steps[at];
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": props.label,
+      className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
+    },
+    /* @__PURE__ */ React.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
+      const state = i < at ? "done" : i === at ? "current" : "upcoming";
+      const marker = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React.createElement(Icon, { name: "check" }) : i + 1);
+      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+      const clickable = state === "done" && !!props.onStepClick;
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: s.id,
+          className: cx("aura-stepper__item", "is-" + state),
+          "aria-current": state === "current" ? "step" : void 0
+        },
+        clickable ? /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "aura-stepper__step aura-focusable",
+            onClick: function() {
+              props.onStepClick(s.id);
+            }
+          },
+          marker,
+          text
+        ) : /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__step" }, marker, text)
+      );
+    })),
+    !vertical && cur ? /* @__PURE__ */ React.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+  );
+});
+export {
+  Stepper
+};

package/dist/esm/Switch.js

@@ -0,0 +1,30 @@
+'use client';
+import * as React from "react";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const Switch = React.forwardRef(function Switch2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
+  const on = !!st[0];
+  return /* @__PURE__ */ React.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": on,
+      disabled: props.disabled,
+      "aria-labelledby": props.label ? id + "-label" : void 0,
+      "aria-label": props.label ? void 0 : props["aria-label"],
+      "aria-describedby": props.description ? id + "-desc" : void 0,
+      className: cx("aura-switch", on && "is-on"),
+      onClick: function() {
+        st[1](!on);
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
+  ), props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
+});
+export {
+  Switch
+};

package/dist/esm/Tabs.js

@@ -0,0 +1,89 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const Tabs = React.forwardRef(function Tabs2(props, ref) {
+  const items = props.tabs || [], base = uid();
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue || items[0] && items[0].id,
+    props.onChange
+  );
+  const refs = React.useRef({});
+  const current = items.filter(function(t) {
+    return t.id === st[0];
+  })[0] || items[0];
+  function go(i) {
+    const enabled = items.filter(function(t2) {
+      return !t2.disabled;
+    });
+    const t = enabled[(i + enabled.length) % enabled.length];
+    st[1](t.id);
+    if (refs.current[t.id]) refs.current[t.id].focus();
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": props.label,
+      className: "aura-tabs__list",
+      onKeyDown: function(e) {
+        const enabled = items.filter(function(t) {
+          return !t.disabled;
+        }), i = enabled.indexOf(current);
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(i + 1);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(i - 1);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          go(0);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          go(enabled.length - 1);
+        }
+      }
+    },
+    items.map(function(t) {
+      const on = current && t.id === current.id;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: t.id,
+          type: "button",
+          role: "tab",
+          id: base + "-tab-" + t.id,
+          "aria-selected": on,
+          "aria-controls": base + "-panel-" + t.id,
+          tabIndex: on ? 0 : -1,
+          disabled: t.disabled,
+          ref: function(el) {
+            refs.current[t.id] = el;
+          },
+          className: cx("aura-tab", on && "is-active"),
+          onClick: function() {
+            st[1](t.id);
+          }
+        },
+        t.icon ? /* @__PURE__ */ React.createElement(Icon, { name: t.icon }) : null,
+        t.label,
+        t.count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-tab__count" }, t.count) : null
+      );
+    })
+  ), current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      id: base + "-panel-" + current.id,
+      "aria-labelledby": base + "-tab-" + current.id,
+      tabIndex: 0,
+      className: "aura-tabs__panel"
+    },
+    current.content
+  ) : null);
+});
+export {
+  Tabs
+};

package/dist/esm/Tag.js

@@ -0,0 +1,42 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, omit } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Tag = React.forwardRef(function Tag2(props, ref) {
+  const t = useStrings();
+  const selectable = props.onClick != null || props.selected != null;
+  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  const inner = [
+    props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
+    /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
+  ];
+  if (selectable) {
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        "aria-pressed": !!props.selected,
+        disabled: props.disabled,
+        className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+      },
+      props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 14 }) : inner[0],
+      inner[1]
+    );
+  }
+  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "aura-tag__remove",
+      "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
+      onClick: props.onRemove
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 12 })
+  ) : null);
+});
+export {
+  Tag
+};

package/dist/esm/TextField.js

@@ -0,0 +1,39 @@
+'use client';
+import * as React from "react";
+import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, omit, uid } from "./internal.js";
+const TextField = React.forwardRef(function TextField2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS);
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        ...rest,
+        ref,
+        id,
+        className: "aura-input__control",
+        placeholder: props.placeholder,
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }
+    ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
+  );
+});
+export {
+  TextField
+};

package/dist/esm/Textarea.js

@@ -0,0 +1,38 @@
+'use client';
+import * as React from "react";
+import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { omit, uid } from "./internal.js";
+const Textarea = React.forwardRef(function Textarea2(props, ref) {
+  const auto = uid(), id = props.id || auto;
+  const rest = omit(props, FIELD_KEYS);
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        rows: 4,
+        ...rest,
+        ref,
+        id,
+        className: "aura-input aura-textarea",
+        placeholder: props.placeholder,
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }
+    )
+  );
+});
+export {
+  Textarea
+};

package/dist/esm/TimePicker.js

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
-import { Field } from "./forms.js";
+import { Field } from "./Field.js";
 function pad(n) {
   return (n < 10 ? "0" : "") + n;
 }

package/dist/esm/Toaster.js

@@ -0,0 +1,124 @@
+'use client';
+import * as React from "react";
+import { ALERT_ICON } from "./Alert.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { cx, useMounted } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { createPortal } from "react-dom";
+const toastState = {
+  list: [],
+  subs: [],
+  n: 0
+};
+function emitToasts() {
+  toastState.subs.forEach(function(f) {
+    f(toastState.list.slice());
+  });
+}
+function toast(opts) {
+  if (typeof opts === "string") opts = { title: opts };
+  const id = opts.id || "t" + ++toastState.n;
+  toastState.list = toastState.list.filter(function(t) {
+    return t.id !== id;
+  }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
+  emitToasts();
+  return id;
+}
+toast.dismiss = function(id) {
+  toastState.list = toastState.list.filter(function(t) {
+    return t.id !== id;
+  });
+  emitToasts();
+};
+function ToastItem(props) {
+  const str = useStrings();
+  const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
+  function start() {
+    if (left.current === Infinity) return;
+    since.current = Date.now();
+    timer.current = setTimeout(function() {
+      toast.dismiss(t.id);
+    }, left.current);
+  }
+  function pause() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+      left.current -= Date.now() - since.current;
+    }
+  }
+  React.useEffect(function() {
+    start();
+    return pause;
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx("aura-toast", "aura-toast--" + t.tone),
+      role: t.tone === "danger" ? "alert" : "status",
+      onMouseEnter: pause,
+      onMouseLeave: start,
+      onFocus: pause,
+      onBlur: start
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
+    t.action ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-toast__action",
+        onClick: function() {
+          t.action.onClick && t.action.onClick();
+          toast.dismiss(t.id);
+        }
+      },
+      t.action.label
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: "x",
+        label: str.dismissToast,
+        className: "aura-toast__close",
+        onClick: function() {
+          toast.dismiss(t.id);
+        }
+      }
+    )
+  );
+}
+function Toaster(props) {
+  const t = useStrings();
+  const mounted = useMounted();
+  const s = React.useState(toastState.list);
+  React.useEffect(function() {
+    toastState.subs.push(s[1]);
+    return function() {
+      toastState.subs = toastState.subs.filter(function(f) {
+        return f !== s[1];
+      });
+    };
+  }, []);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+        role: "region",
+        "aria-live": "polite",
+        "aria-label": t.notifications
+      },
+      s[0].map(function(t2) {
+        return /* @__PURE__ */ React.createElement(ToastItem, { key: t2.id, toast: t2 });
+      })
+    ),
+    document.body
+  );
+}
+export {
+  Toaster,
+  toast
+};

package/dist/esm/Tooltip.js

@@ -0,0 +1,80 @@
+'use client';
+import * as React from "react";
+import { uid, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { createPortal } from "react-dom";
+const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
+  const id = uid(), st = React.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
+  const anchor = React.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React.useRef(null), timer = React.useRef(void 0);
+  const pos = React.useState(null);
+  function show(now) {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(
+      function() {
+        set(true);
+      },
+      now ? 0 : props.delay == null ? 400 : props.delay
+    );
+  }
+  function hide() {
+    clearTimeout(timer.current);
+    set(false);
+  }
+  useIsoLayoutEffect(
+    function() {
+      if (!open || !anchor.current || !tip.current) return;
+      const r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
+      let side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
+      if (side === "top" && top < 8) top = r.bottom + 8;
+      const left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
+      pos[1]({ top, left });
+    },
+    [open]
+  );
+  React.useEffect(
+    function() {
+      if (!open) return;
+      function esc(e) {
+        if (e.key === "Escape") hide();
+      }
+      document.addEventListener("keydown", esc);
+      return function() {
+        document.removeEventListener("keydown", esc);
+      };
+    },
+    [open]
+  );
+  const child = React.Children.only(props.children);
+  const trigger = /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref: anchorMerged,
+      className: "aura-tooltip-anchor",
+      onMouseEnter: function() {
+        show(false);
+      },
+      onMouseLeave: hide,
+      onFocus: function() {
+        show(true);
+      },
+      onBlur: hide
+    },
+    React.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, trigger, open ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: tip,
+        id,
+        role: "tooltip",
+        className: "aura-tooltip",
+        style: { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 }
+      },
+      props.content
+    ),
+    document.body
+  ) : null);
+});
+export {
+  Tooltip
+};