Build & Release v1.8.1

dist/common/ui.js

@@ -1,61 +1,61 @@
 import { CSS_COLORS as u } from "./constants.js";
 import { classes as y } from "./react.js";
-const f = (o) => {
-  if (typeof o == "string")
-    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
-  if (typeof o == "number")
-    return `${o}rem`;
-}, p = (o) => {
-  if (typeof o == "string")
-    return f(o);
-  if (typeof o == "number")
-    return f(o * 0.5);
+const f = (t) => {
+  if (typeof t == "string")
+    return t.endsWith("px") ? `${Number.parseFloat(t) / 12}rem` : t;
+  if (typeof t == "number")
+    return `${t}rem`;
+}, p = (t) => {
+  if (typeof t == "string")
+    return f(t);
+  if (typeof t == "number")
+    return f(t * 0.5);
 };
-function w(o) {
-  return !h(o);
+function w(t) {
+  return !h(t);
 }
-function h(o) {
-  return typeof o == "string" && u.includes(o);
+function h(t) {
+  return typeof t == "string" && u.includes(t);
 }
-const c = (o) => (t, i) => {
-  (typeof i == "number" || typeof i == "string") && (t[o] = i);
-}, n = (o, t) => (i, e) => {
-  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
-}, l = (o, t) => (i, e) => {
-  e && (i[o] = t);
-}, s = (o, t, i) => (e, r) => {
+const l = (t) => (o, i) => {
+  (typeof i == "number" || typeof i == "string") && (o[t] = i);
+}, n = (t, o) => (i, e) => {
+  (typeof e == "number" || typeof e == "string") && (i[t] = o(e));
+}, s = (t, o) => (i, e) => {
+  e && (i[t] = o);
+}, c = (t, o, i) => (e, r) => {
   if (typeof r == "number" || typeof r == "string")
     for (let m = 0; m < i.length; m++)
-      e[o + i[m]] = t(r);
-}, a = (o) => (t, i) => {
-  w(i) && (t[o] = i);
+      e[t + i[m]] = o(r);
+}, a = (t) => (o, i) => {
+  w(i) && (o[t] = i);
 }, d = {
-  align: c("textAlign"),
+  align: l("textAlign"),
   bottom: n("bottom", f),
-  fontFamily: c("fontFamily"),
+  fontFamily: l("fontFamily"),
   fontSize: n("fontSize", f),
-  fontWeight: c("fontWeight"),
+  fontWeight: l("fontWeight"),
   height: n("height", f),
   left: n("left", f),
   maxHeight: n("maxHeight", f),
   maxWidth: n("maxWidth", f),
   minHeight: n("minHeight", f),
   minWidth: n("minWidth", f),
-  opacity: c("opacity"),
-  overflow: c("overflow"),
-  overflowX: c("overflowX"),
-  overflowY: c("overflowY"),
-  position: c("position"),
+  opacity: l("opacity"),
+  overflow: l("overflow"),
+  overflowX: l("overflowX"),
+  overflowY: l("overflowY"),
+  position: l("position"),
   right: n("right", f),
-  textAlign: c("textAlign"),
+  textAlign: l("textAlign"),
   top: n("top", f),
-  verticalAlign: c("verticalAlign"),
+  verticalAlign: l("verticalAlign"),
   width: n("width", f),
-  lineHeight: (o, t) => {
-    typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = f(t));
+  lineHeight: (t, o) => {
+    typeof o == "number" ? t.lineHeight = o : typeof o == "string" && (t.lineHeight = f(o));
   },
   // Margin
-  m: s("margin", p, [
+  m: c("margin", p, [
     "Top",
     "Bottom",
     "Left",
@@ -65,10 +65,10 @@ const c = (o) => (t, i) => {
   ml: n("marginLeft", p),
   mr: n("marginRight", p),
   mt: n("marginTop", p),
-  mx: s("margin", p, ["Left", "Right"]),
-  my: s("margin", p, ["Top", "Bottom"]),
+  mx: c("margin", p, ["left", "right"]),
+  my: c("margin", p, ["top", "bottom"]),
   // Padding
-  p: s("padding", p, [
+  p: c("padding", p, [
     "Top",
     "Bottom",
     "Left",
@@ -78,58 +78,58 @@ const c = (o) => (t, i) => {
   pl: n("paddingLeft", p),
   pr: n("paddingRight", p),
   pt: n("paddingTop", p),
-  px: s("padding", p, ["Left", "Right"]),
-  py: s("padding", p, ["Top", "Bottom"]),
+  px: c("padding", p, ["left", "right"]),
+  py: c("padding", p, ["top", "bottom"]),
   // Color props
   color: a("color"),
   textColor: a("color"),
   backgroundColor: a("backgroundColor")
 }, b = {
-  bold: l("fontWeight", "bold"),
-  fillPositionedParent: (o, t) => {
-    t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
+  bold: s("fontWeight", "bold"),
+  fillPositionedParent: (t, o) => {
+    o && (t.position = "absolute", t.top = 0, t.bottom = 0, t.left = 0, t.right = 0);
   },
-  inline: l("display", "inline-block"),
-  italic: l("fontStyle", "italic"),
-  nowrap: l("whiteSpace", "nowrap"),
-  preserveWhitespace: l("whiteSpace", "pre-wrap")
+  inline: s("display", "inline-block"),
+  italic: s("fontStyle", "italic"),
+  nowrap: s("whiteSpace", "nowrap"),
+  preserveWhitespace: s("whiteSpace", "pre-wrap")
 };
-function T(o) {
-  const t = {}, i = {};
-  for (const e in o) {
+function S(t) {
+  const o = {}, i = {};
+  for (const e in t) {
     if (e === "style")
       continue;
-    const r = o[e], m = d[e] || b[e];
-    m ? m(i, r) : t[e] = r;
+    const r = t[e], m = d[e] || b[e];
+    m ? m(i, r) : o[e] = r;
   }
-  return t.style = { ...i, ...o.style }, t;
+  return o.style = { ...i, ...t.style }, o;
 }
-function S(o) {
-  const t = o.textColor || o.color, { backgroundColor: i } = o;
+function T(t) {
+  const o = t.textColor || t.color, { backgroundColor: i } = t;
   return y([
-    h(t) && `color-${t}`,
+    h(o) && `color-${o}`,
     h(i) && `color-bg-${i}`
   ]);
 }
-function P(o) {
-  const t = {};
-  if (!o) return t;
-  const i = o.split(" ");
+function P(t) {
+  const o = {};
+  if (!t) return o;
+  const i = t.split(" ");
   for (const e of i) {
     const [r, m] = e.split("-");
     if (r)
       if (r in d) {
         if (m === "") continue;
         const g = Number(m);
-        !Number.isNaN(g) && Number.isFinite(g) ? t[r] = g : t[r] = m;
-      } else r in b ? t[r] = !0 : console.warn(`Unknown prop ${r}`);
+        !Number.isNaN(g) && Number.isFinite(g) ? o[r] = g : o[r] = m;
+      } else r in b ? o[r] = !0 : console.warn(`Unknown prop ${r}`);
   }
-  return t;
+  return o;
 }
 export {
   b as booleanStyleMap,
-  S as computeBoxClassName,
-  T as computeBoxProps,
+  T as computeBoxClassName,
+  S as computeBoxProps,
   P as computeTwClass,
   p as halfUnit,
   d as stringStyleMap,

dist/components/MenuBar.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import { useRef as B, useEffect as h } from "react";
-import { classes as _ } from "../common/react.js";
+import { classes as p } from "../common/react.js";
 import { Box as l } from "./Box.js";
 import { Icon as v } from "./Icon.js";
 function k(n) {
@@ -34,12 +34,12 @@ function N(n) {
     openWidth: s,
     onOutsideClick: m,
     ...M
-  } = n, f = B(null);
-  return /* @__PURE__ */ p("div", { ref: f, children: [
+  } = n, _ = B(null);
+  return /* @__PURE__ */ f("div", { ref: _, children: [
     /* @__PURE__ */ t(
       l,
       {
-        className: _([
+        className: p([
           "MenuBar__MenuBarButton",
           "MenuBar__font",
           "MenuBar__hover",
@@ -55,7 +55,7 @@ function N(n) {
       k,
       {
         width: s,
-        menuRef: this.menuRef,
+        menuRef: _,
         onOutsideClick: m,
         children: e
       }
@@ -99,10 +99,10 @@ function d(n) {
 O.Dropdown = d;
 function g(n) {
   const { value: e, displayText: o, onClick: r, checked: a } = n;
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     l,
     {
-      className: _([
+      className: p([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__MenuItemToggle",
@@ -122,7 +122,7 @@ function C(n) {
   return /* @__PURE__ */ t(
     l,
     {
-      className: _([
+      className: p([
         "MenuBar__font",
         "MenuBar__MenuItem",
         "MenuBar__hover"

dist/components/TextArea.d.ts

@@ -18,6 +18,8 @@ export declare const TextArea: import('react').ForwardRefExoticComponent<Partial
     placeholder: string;
     scrollbar: boolean;
     selfClear: boolean;
+    /** Provides a Record with key: markupChar entries which can be used for ctrl + key combinations to surround a selected text with the markup character */
+    userMarkup: Record<string, string>;
     value: string;
 }> & Partial<{
     as: string;