@jirawatpyk/aura-react 4.4.2 → 4.5.1

package/dist/esm/Menu.js

@@ -3,44 +3,52 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { cx, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
-const h = React.createElement;
 const Menu = React.forwardRef(function Menu2(props, ref) {
-  var own = React.useRef(null), merged = useMergedRef(ref, own);
-  var posState = React.useState(null);
-  var pos = posState[0], setPos = posState[1];
-  var items = props.items || [];
-  var mounted = useMounted();
-  useIsoLayoutEffect(function() {
-    var a = props.anchor, m = own.current;
-    if (!a || !m) return;
-    var r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
-    var top = r.bottom + 4;
-    if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
-    var left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
-    setPos({ top, left });
-  }, [props.anchor, mounted]);
-  React.useEffect(function() {
-    if (!mounted) return;
-    var first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
-    if (first && props.autoFocus !== false) first.focus();
-    function outside(e) {
-      if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target))) props.onClose(false);
-    }
-    function onScroll(e) {
-      if (own.current && !own.current.contains(e.target)) props.onClose(false);
-    }
-    document.addEventListener("pointerdown", outside, true);
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", onScroll);
-    return function() {
-      document.removeEventListener("pointerdown", outside, true);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", onScroll);
-    };
-  }, [mounted]);
+  const own = React.useRef(null), merged = useMergedRef(ref, own);
+  const posState = React.useState(null);
+  const pos = posState[0], setPos = posState[1];
+  const items = props.items || [];
+  const mounted = useMounted();
+  useIsoLayoutEffect(
+    function() {
+      const a = props.anchor, m = own.current;
+      if (!a || !m) return;
+      const r = a.getBoundingClientRect(), mh = m.offsetHeight, mw = m.offsetWidth;
+      let top = r.bottom + 4;
+      if (top + mh > window.innerHeight - 8 && r.top - mh - 4 > 8) top = r.top - mh - 4;
+      const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
+      setPos({ top, left });
+    },
+    [props.anchor, mounted]
+  );
+  React.useEffect(
+    function() {
+      if (!mounted) return;
+      const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
+      if (first && props.autoFocus !== false) first.focus();
+      function outside(e) {
+        if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
+          props.onClose(false);
+      }
+      function onScroll(e) {
+        if (own.current && !own.current.contains(e.target)) props.onClose(false);
+      }
+      document.addEventListener("pointerdown", outside, true);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("resize", onScroll);
+      return function() {
+        document.removeEventListener("pointerdown", outside, true);
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("resize", onScroll);
+      };
+    },
+    [mounted]
+  );
   function onKeyDown(e) {
-    var list = Array.prototype.slice.call(own.current.querySelectorAll('[role^="menuitem"]:not([disabled])'));
-    var i = list.indexOf(document.activeElement);
+    const list = Array.prototype.slice.call(
+      own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
+    );
+    const i = list.indexOf(document.activeElement);
     if (e.key === "ArrowDown") {
       e.preventDefault();
       list[(i + 1) % list.length].focus();
@@ -61,36 +69,40 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     }
     e.stopPropagation();
   }
-  var el = h("div", {
-    ref: merged,
-    role: "menu",
-    "aria-label": props.label,
-    className: "aura-menu",
-    onKeyDown,
-    style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
-  }, items.map(function(it, i) {
-    if (it.separator) return h("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
-    var isCheck = it.checked !== void 0;
-    return h(
-      "button",
-      {
-        key: i,
-        type: "button",
-        tabIndex: -1,
-        disabled: it.disabled,
-        role: isCheck ? "menuitemcheckbox" : "menuitem",
-        "aria-checked": isCheck ? !!it.checked : void 0,
-        className: "aura-menu__item",
-        onClick: function() {
-          it.onSelect();
-          if (!it.keepOpen) props.onClose(true);
-        }
-      },
-      isCheck ? h("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? h(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? h(Icon, { name: it.icon }) : h("span", { className: "aura-menu__blank" }),
-      h("span", { className: "aura-menu__label" }, it.label),
-      it.hint ? h("span", { className: "aura-menu__hint" }, it.hint) : null
-    );
-  }));
+  const el = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: merged,
+      role: "menu",
+      "aria-label": props.label,
+      className: "aura-menu",
+      onKeyDown,
+      style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
+    },
+    items.map(function(it, i) {
+      if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
+      const isCheck = it.checked !== void 0;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: i,
+          type: "button",
+          tabIndex: -1,
+          disabled: it.disabled,
+          role: isCheck ? "menuitemcheckbox" : "menuitem",
+          "aria-checked": isCheck ? !!it.checked : void 0,
+          className: "aura-menu__item",
+          onClick: function() {
+            it.onSelect();
+            if (!it.keepOpen) props.onClose(true);
+          }
+        },
+        isCheck ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" }),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-menu__label" }, it.label),
+        it.hint ? /* @__PURE__ */ React.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
+      );
+    })
+  );
   return mounted ? createPortal(el, document.body) : null;
 });
 export {

package/dist/esm/Stat.js

@@ -2,14 +2,13 @@
 import * as React from "react";
 import { cx } from "./internal.js";
 import { Icon } from "./Icon.js";
-const h = React.createElement;
 const Stat = React.forwardRef(function Stat2(props, ref) {
-  var ch = props.change;
-  var dir = ch && (ch.direction || "flat");
-  var tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
-  var Tag = props.href ? "a" : props.onClick ? "button" : "div";
-  var interactive = Tag !== "div";
-  return h(
+  const ch = props.change;
+  const dir = ch && (ch.direction || "flat");
+  const tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
+  const Tag = props.href ? "a" : props.onClick ? "button" : "div";
+  const interactive = Tag !== "div";
+  return /* @__PURE__ */ React.createElement(
     Tag,
     {
       ref,
@@ -19,25 +18,9 @@ const Stat = React.forwardRef(function Stat2(props, ref) {
       type: Tag === "button" ? "button" : void 0,
       "aria-busy": props.loading || void 0
     },
-    h(
-      "span",
-      { className: "aura-stat__head" },
-      h("span", { className: "aura-stat__label" }, props.label),
-      props.icon ? h("span", { className: "aura-stat__icon" }, h(Icon, { name: props.icon })) : null
-    ),
-    props.loading ? h("span", { className: "aura-stat__value" }, h("span", { className: "aura-skel aura-stat__skel" })) : h("span", { className: "aura-stat__value" }, props.value, props.unit ? h("span", { className: "aura-stat__unit" }, props.unit) : null),
-    ch && !props.loading || props.caption ? h(
-      "span",
-      { className: "aura-stat__foot" },
-      ch && !props.loading ? h(
-        "span",
-        { className: cx("aura-stat__change", "is-" + tone) },
-        h(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }),
-        h("span", null, ch.value)
-      ) : null,
-      ch && ch.label && !props.loading ? h("span", { className: "aura-stat__caption" }, ch.label) : null,
-      props.caption ? h("span", { className: "aura-stat__caption" }, props.caption) : null
-    ) : null
+    /* @__PURE__ */ React.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
+    props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(Icon, { name: dir === "up" ? "trending-up" : dir === "down" ? "trending-down" : "minus", size: 14 }), /* @__PURE__ */ React.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
   );
 });
 export {

package/dist/esm/StatusPill.js

@@ -2,27 +2,26 @@
 import * as React from "react";
 import { cx } from "./internal.js";
 import { Icon } from "./Icon.js";
-const h = React.createElement;
-var TONE_ICON = { neutral: "circle", progress: "circle-dot-dashed", ready: "circle-check", blocked: "ban" };
-var TONE_WORDS = {
+const TONE_ICON = {
+  neutral: "circle",
+  progress: "circle-dot-dashed",
+  ready: "circle-check",
+  blocked: "ban"
+};
+const TONE_WORDS = {
   ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
   blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
 };
 function toneFor(status) {
-  var s = String(status == null ? "" : status).trim().toLowerCase();
-  for (var t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
+  const s = String(status == null ? "" : status).trim().toLowerCase();
+  for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
   return "neutral";
 }
-var TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
+const TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
 const StatusPill = React.forwardRef(function StatusPill2(props, ref) {
-  var tone = props.tone || toneFor(props.children);
-  return h(
-    "span",
-    { ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) },
-    h(Icon, { name: TONE_ICON[tone] || "circle", size: 12 }),
-    props.children
-  );
+  const tone = props.tone || toneFor(props.children);
+  return /* @__PURE__ */ React.createElement("span", { ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: TONE_ICON[tone] || "circle", size: 12 }), props.children);
 });
 export {
   StatusPill,

package/dist/esm/Surface.js

@@ -3,19 +3,23 @@ import * as React from "react";
 import { cx, omit } from "./internal.js";
 const h = React.createElement;
 const Surface = React.forwardRef(function Surface2(props, ref) {
-  var t = props.texture || "mesh";
-  var rest = omit(props, ["texture", "className", "children", "as"]);
-  return h(props.as || "div", Object.assign({}, rest, {
-    ref,
-    /* Textures stay light in every theme, so everything on them uses the light tokens. */
-    "data-theme": "light",
-    className: cx(
-      "aura-surface",
-      (t === "mesh" || t === "mesh-grain") && "aura-mesh",
-      (t === "grain" || t === "mesh-grain") && "aura-grain",
-      props.className
-    )
-  }), props.children);
+  const t = props.texture || "mesh";
+  const rest = omit(props, ["texture", "className", "children", "as"]);
+  return h(
+    props.as || "div",
+    Object.assign({}, rest, {
+      ref,
+      /* Textures stay light in every theme, so everything on them uses the light tokens. */
+      "data-theme": "light",
+      className: cx(
+        "aura-surface",
+        (t === "mesh" || t === "mesh-grain") && "aura-mesh",
+        (t === "grain" || t === "mesh-grain") && "aura-grain",
+        props.className
+      )
+    }),
+    props.children
+  );
 });
 export {
   Surface

package/dist/esm/ThemeStyle.js

@@ -1,12 +1,16 @@
 'use client';
 import * as React from "react";
 import { createTheme } from "./theme.js";
-const h = React.createElement;
 function ThemeStyle(props) {
-  var css = React.useMemo(function() {
-    return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(props.selector);
-  }, [props.brand, props.signal, props.primary, props.name, props.selector]);
-  return h("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
+  const css = React.useMemo(
+    function() {
+      return createTheme({ brand: props.brand, signal: props.signal, primary: props.primary, name: props.name }).css(
+        props.selector
+      );
+    },
+    [props.brand, props.signal, props.primary, props.name, props.selector]
+  );
+  return /* @__PURE__ */ React.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
 }
 export {
   ThemeStyle