@companix/uikit 0.1.15 → 0.1.17

package/dist/bundle.es35.js

@@ -1,22 +1,88 @@
-import { jsx as o } from "react/jsx-runtime";
-import m from "classnames";
-import { forwardRef as s } from "react";
-const g = s(
-  ({ icon: r, className: t, size: i = "m", ...e }, n) => {
-    const [c, a, , , l] = r;
-    return /* @__PURE__ */ o(
-      "svg",
-      {
-        ref: n,
-        viewBox: `0 0 ${c} ${a}`,
-        className: m(`icon icon-size-${i}`, t),
-        ...e,
-        role: "img",
-        children: /* @__PURE__ */ o(f, { paths: l })
-      }
-    );
+import { jsx as g } from "react/jsx-runtime";
+import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
+import { getNum as S } from "@companix/utils-js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es65.js";
+import { SelectRightElements as z } from "./bundle.es73.js";
+import { Select as F } from "./bundle.es13.js";
+import { Input as G } from "./bundle.es15.js";
+const o = {
+  char: ":",
+  toString: (s) => s ? y(s, o.char) : "",
+  toValue: (s) => {
+    const n = s.split(o.char);
+    if (n.length === 2) {
+      const [e, u] = [S(n[0]), S(n[1])];
+      if (e !== null && u !== null && e < 24 && e >= 0 && u < 60 && u >= 0)
+        return { hours: e, minutes: u };
+    }
+    return null;
   }
-), f = ({ paths: r }) => Array.isArray(r) ? /* @__PURE__ */ o("g", { children: r.map((t, i) => /* @__PURE__ */ o("path", { fill: "currentColor", d: t }, `-d-${i}`)) }) : /* @__PURE__ */ o("path", { fill: "currentColor", d: r });
+}, Y = (s) => {
+  const { value: n, onChange: e, clearButton: u, clearButtonIcon: _, disabled: a, ...T } = s, m = b(null), p = b(null), h = I(() => W(10), []), k = I(() => {
+    if (n && !n.minutes.toString().endsWith("0")) {
+      const t = n.hours * 6 + Math.trunc(n.minutes / 10), r = [...h];
+      return r.splice(t + 1, 0, q(n)), r;
+    }
+    return h;
+  }, [h, n]), [i, l] = E(() => o.toString(n)), v = (t) => {
+    l(t), N(t);
+    const r = o.toValue(t);
+    r && e?.(r);
+  }, x = (t) => {
+    a || m.current && m.current.getAttribute("data-state") === "open" && t.preventDefault();
+  }, B = () => {
+    o.toValue(i) === null && l(o.toString(n ?? null));
+  }, O = (t) => {
+    e?.(o.toValue(t)), l(t);
+  }, R = (t) => {
+    t.stopPropagation(), l(""), e?.(null);
+  }, N = A((t) => {
+    if (t && t !== "__:__") {
+      const [r, M] = t.split(":"), d = (c) => {
+        const [C, V] = c.split(""), [j, D] = [C === "_" ? "0" : C, V === "_" ? "0" : V];
+        return j + D;
+      }, P = [d(r), d(M)].join(":"), f = o.toValue(P);
+      if (f) {
+        const c = f.hours * 6 + Math.trunc(f.minutes / 10);
+        c !== -1 && p.current && p.current.scrollTo(c);
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ g(
+    F,
+    {
+      minimalOptions: !0,
+      options: k,
+      onChange: O,
+      value: i,
+      popoverRef: m,
+      scrollRef: p,
+      disabled: a,
+      children: /* @__PURE__ */ g(
+        G,
+        {
+          ...T,
+          value: i,
+          disabled: a,
+          onClick: x,
+          onValueChange: v,
+          onBlur: B,
+          mask: "99:99",
+          placeholder: "00:00",
+          rightElement: /* @__PURE__ */ g(
+            z,
+            {
+              clearButton: u,
+              clearButtonIcon: _,
+              value: !!w(i, [":", "_"]),
+              onClear: R
+            }
+          )
+        }
+      )
+    }
+  );
+};
 export {
-  g as Icon
+  Y as TimePicker
 };

package/dist/bundle.es36.js

@@ -1,9 +1,22 @@
-import { jsx as r } from "react/jsx-runtime";
-import { clamp as o, pc as p } from "@companix/utils-browser";
-const i = ({ appearance: a = "primary", value: e }) => {
-  const s = 100 * o(e, 0, 1);
-  return /* @__PURE__ */ r("div", { "aria-valuemax": 100, "aria-valuemin": 0, role: "progressbar", className: "progress-bar", children: /* @__PURE__ */ r("div", { className: "progress-bar-thumb", "data-appearance": a, style: { width: p(s) } }) });
-};
+import { jsx as o } from "react/jsx-runtime";
+import m from "classnames";
+import { forwardRef as s } from "react";
+const g = s(
+  ({ icon: r, className: t, size: i = "m", ...e }, n) => {
+    const [c, a, , , l] = r;
+    return /* @__PURE__ */ o(
+      "svg",
+      {
+        ref: n,
+        viewBox: `0 0 ${c} ${a}`,
+        className: m(`icon icon-size-${i}`, t),
+        ...e,
+        role: "img",
+        children: /* @__PURE__ */ o(f, { paths: l })
+      }
+    );
+  }
+), f = ({ paths: r }) => Array.isArray(r) ? /* @__PURE__ */ o("g", { children: r.map((t, i) => /* @__PURE__ */ o("path", { fill: "currentColor", d: t }, `-d-${i}`)) }) : /* @__PURE__ */ o("path", { fill: "currentColor", d: r });
 export {
-  i as ProgressBar
+  g as Icon
 };

package/dist/bundle.es37.js

@@ -1,5 +1,9 @@
-import { jsx as e, Fragment as t } from "react/jsx-runtime";
-const l = ({ ...r }) => /* @__PURE__ */ e("div", { className: "skeleton", style: r, children: /* @__PURE__ */ e(t, { children: "‌" }) });
+import { jsx as r } from "react/jsx-runtime";
+import { clamp as o, pc as p } from "@companix/utils-browser";
+const i = ({ appearance: a = "primary", value: e }) => {
+  const s = 100 * o(e, 0, 1);
+  return /* @__PURE__ */ r("div", { "aria-valuemax": 100, "aria-valuemin": 0, role: "progressbar", className: "progress-bar", children: /* @__PURE__ */ r("div", { className: "progress-bar-thumb", "data-appearance": a, style: { width: p(s) } }) });
+};
 export {
-  l as Skeleton
+  i as ProgressBar
 };

package/dist/bundle.es38.js

@@ -1,25 +1,5 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import m from "classnames";
-import { Icon as p } from "./bundle.es35.js";
-const b = (c) => {
-  const { appearance: l, icon: s, className: r, iconSize: t, title: e, description: n, children: o, style: d } = c;
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: m("blank", r),
-      "data-appearance": l ?? "neutral",
-      style: d,
-      children: [
-        /* @__PURE__ */ a("div", { className: "blank-icon", children: /* @__PURE__ */ a(p, { icon: s, size: t }) }),
-        (e || n) && /* @__PURE__ */ i("div", { className: "blank-text", children: [
-          e && /* @__PURE__ */ a("h4", { className: "blank-title", children: e }),
-          n && /* @__PURE__ */ a("div", { className: "blank-description", children: n })
-        ] }),
-        o
-      ]
-    }
-  );
-};
+import { jsx as e, Fragment as t } from "react/jsx-runtime";
+const l = ({ ...r }) => /* @__PURE__ */ e("div", { className: "skeleton", style: r, children: /* @__PURE__ */ e(t, { children: "‌" }) });
 export {
-  b as Blank
+  l as Skeleton
 };

package/dist/bundle.es39.js

@@ -1,54 +1,25 @@
-import { jsxs as e, jsx as s } from "react/jsx-runtime";
-import { getInitialsFontSize as l } from "./bundle.es4.js";
-import { clamp as i, customCSS as m, px as n } from "@companix/utils-browser";
-const u = ({
-  appearance: o = "primary",
-  hint: t,
-  size: a = 80,
-  width: c = 6,
-  value: g
-}) => {
-  const r = 100 * i(g, 0, 1);
-  return /* @__PURE__ */ e(
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import m from "classnames";
+import { Icon as p } from "./bundle.es36.js";
+const b = (c) => {
+  const { appearance: l, icon: s, className: r, iconSize: t, title: e, description: n, children: o, style: d } = c;
+  return /* @__PURE__ */ i(
     "div",
     {
-      "aria-valuemax": 100,
-      "aria-valuemin": 0,
-      "aria-valuenow": r,
-      role: "progressbar",
-      className: "progress-ring",
-      "data-appearance": o,
+      className: m("blank", r),
+      "data-appearance": l ?? "neutral",
+      style: d,
       children: [
-        /* @__PURE__ */ e(
-          "svg",
-          {
-            className: "progress-ring-image",
-            style: m({
-              "--percentage": r / 100,
-              "--size": n(a),
-              "--track-width": n(c)
-            }),
-            children: [
-              /* @__PURE__ */ s("circle", { className: "progress-ring-track" }),
-              /* @__PURE__ */ s("circle", { className: "progress-ring-indicator" })
-            ]
-          }
-        ),
-        t && /* @__PURE__ */ e(
-          "div",
-          {
-            className: "progress-ring-hint",
-            style: { fontSize: i(l(a) - 4, 0, 18) },
-            children: [
-              Math.round(r),
-              "%"
-            ]
-          }
-        )
+        /* @__PURE__ */ a("div", { className: "blank-icon", children: /* @__PURE__ */ a(p, { icon: s, size: t }) }),
+        (e || n) && /* @__PURE__ */ i("div", { className: "blank-text", children: [
+          e && /* @__PURE__ */ a("h4", { className: "blank-title", children: e }),
+          n && /* @__PURE__ */ a("div", { className: "blank-description", children: n })
+        ] }),
+        o
       ]
     }
   );
 };
 export {
-  u as ProgressRing
+  b as Blank
 };

package/dist/bundle.es40.js

@@ -1,59 +1,54 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import c from "classnames";
-import { Spinner as b } from "./bundle.es7.js";
-import { Icon as h } from "./bundle.es35.js";
-import { attr as N } from "@companix/utils-browser";
-import { WriteBarInput as u } from "./bundle.es70.js";
-const w = (a) => {
-  const {
-    before: e,
-    after: t,
-    containerRef: i,
-    header: o,
-    contentClassName: n,
-    placeholder: m,
-    id: l,
-    onCreate: d,
-    className: p,
-    ...f
-  } = a;
-  return /* @__PURE__ */ s("div", { ref: i, ...f, className: c("write-bar", p), children: [
-    o,
-    /* @__PURE__ */ s("div", { className: c("write-bar-content", n), children: [
-      e && /* @__PURE__ */ r("div", { className: "write-bar-before", children: e }),
-      /* @__PURE__ */ r(
-        u,
-        {
-          className: "write-bar-input-wrapper",
-          placeholder: m,
-          placeholderClassName: "write-bar-placeholder",
-          inputClassName: "write-bar-input",
-          inputMode: "text",
-          id: l,
-          onCreate: d
-        }
-      ),
-      t && /* @__PURE__ */ r("div", { className: "write-bar-after", children: t })
-    ] })
-  ] });
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { getInitialsFontSize as l } from "./bundle.es4.js";
+import { clamp as i, customCSS as m, px as n } from "@companix/utils-browser";
+const u = ({
+  appearance: o = "primary",
+  hint: t,
+  size: a = 80,
+  width: c = 6,
+  value: g
+}) => {
+  const r = 100 * i(g, 0, 1);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": r,
+      role: "progressbar",
+      className: "progress-ring",
+      "data-appearance": o,
+      children: [
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "progress-ring-image",
+            style: m({
+              "--percentage": r / 100,
+              "--size": n(a),
+              "--track-width": n(c)
+            }),
+            children: [
+              /* @__PURE__ */ s("circle", { className: "progress-ring-track" }),
+              /* @__PURE__ */ s("circle", { className: "progress-ring-indicator" })
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            className: "progress-ring-hint",
+            style: { fontSize: i(l(a) - 4, 0, 18) },
+            children: [
+              Math.round(r),
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
-w.IconButton = ({
-  Component: a = "button",
-  icon: e,
-  mode: t,
-  onClick: i,
-  isLoading: o,
-  isHidden: n
-}) => /* @__PURE__ */ r(
-  a,
-  {
-    onClick: i,
-    className: "write-bar-icon",
-    "data-mode": t,
-    "data-hidden": N(n),
-    children: o ? /* @__PURE__ */ r(b, { size: 18 }) : /* @__PURE__ */ r(h, { icon: e, size: "xxs" })
-  }
-);
 export {
-  w as WriteBar
+  u as ProgressRing
 };

package/dist/bundle.es41.js

@@ -1,164 +1,59 @@
-import { escape as u, unescape as f, isElementNode as g } from "@companix/utils-browser";
-import { onElementKeyDownFactory as v } from "./bundle.es71.js";
-import { getEditorSelection as l, normalizeEditorText as a, getNodeTextContent as h, scrollSelectionIntoView as d, getTextSelectionOffsets as E } from "./bundle.es72.js";
-class k {
-  element;
-  prevText = "";
-  prevTextSelection = { from: 0, to: 0 };
-  handlers = {
-    contentChange: /* @__PURE__ */ new Set()
-  };
-  constructor(e) {
-    if (e.contentEditable !== "true")
-      throw new Error("Элемент эдитора должен быть contentEditable");
-    e.tagName !== "SPAN" && console.warn("Используйте элемент span"), this.element = e, this.element.translate = !1;
-  }
-  getElement() {
-    return this.element;
-  }
-  onPaste(e) {
-    return this.handlers.paste || this.element.addEventListener("paste", this.handlePaste), this.handlers.paste = e, () => {
-      this.handlers.paste = void 0, this.element.removeEventListener("paste", this.handlePaste);
-    };
-  }
-  onKeyCombo(e) {
-    const t = v(e);
-    return this.element.addEventListener("keydown", t), this.handlers.keyCombo = e, () => {
-      this.handlers.keyCombo = void 0, this.element.removeEventListener("keydown", t);
-    };
-  }
-  onFocusChange(e) {
-    return this.handlers.focusChange || (this.element.addEventListener("focus", this.handleFocus), this.element.addEventListener("blur", this.handleBlur)), this.handlers.focusChange = e, () => {
-      this.handlers.focusChange = void 0, this.element.removeEventListener("focus", this.handleFocus), this.element.removeEventListener("blur", this.handleBlur);
-    };
-  }
-  onContentChange(e) {
-    return this.handlers.contentChange.size === 0 && (this.element.addEventListener("keyup", this.checkContentChanged), document.addEventListener("selectionchange", this.checkContentChanged)), this.handlers.contentChange.add(e), () => {
-      this.handlers.contentChange.delete(e), this.handlers.contentChange.size === 0 && (this.element.removeEventListener("keyup", this.checkContentChanged), document.removeEventListener("selectionchange", this.checkContentChanged));
-    };
-  }
-  onMouseDown() {
-    return this.element.addEventListener("mousedown", this.handleMouseDown), () => {
-      this.element.removeEventListener("mousedown", this.handleMouseDown);
-    };
-  }
-  setSelection(e) {
-    const t = l(this.element);
-    if (!("selection" in t)) return;
-    const n = document.createRange(), s = this.resolveDomPosition(e.from), o = this.resolveDomPosition(e.to);
-    n.setStart(s.container, s.offset), n.setEnd(o.container, o.offset), t.selection.removeAllRanges(), t.selection.addRange(n);
-  }
-  // вставить переданный текст в текущую выделенную область/позицию курсора внутри contenteditable
-  insertAtSelection(e, t) {
-    t && this.setSelection(t);
-    const n = C(u(e));
-    for (const s of n)
-      s.kind === "Text" && document.execCommand("insertText", !1, f(s.text));
-    this.checkContentChanged();
-  }
-  removeFormat() {
-    document.execCommand("removeFormat");
-  }
-  resetText(e = "", t = !1, n = !0) {
-    const s = !this.isFocused() && !n;
-    this.element.innerText = "";
-    const o = document.activeElement, i = this.element.inputMode;
-    s && (this.element.inputMode = "none"), this.element.focus(), document.execCommand("removeFormat"), t ? document.execCommand("inserthtml", !1, e) : this.insertAtSelection(a(e)), s && (this.element.blur(), this.element.inputMode = i, o?.focus?.()), this.checkContentChanged();
-  }
-  getText() {
-    let e = "";
-    const t = document.createTreeWalker(
-      this.element,
-      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
-    );
-    for (; t.nextNode(); )
-      e += h(t.currentNode);
-    return a(e);
-  }
-  getHtml() {
-    return this.element.innerHTML;
-  }
-  getHtmlWithEmojisAsText() {
-    const e = this.element.innerHTML, t = /<img class="Emoji .+?" src=".+?" alt=".+?">/, n = /alt=".+?"/, s = (o) => {
-      const i = o.match(t);
-      if (!i?.[0]) return o;
-      const c = i[0].match(n);
-      if (!c?.[0]) return o;
-      const m = c[0].replace("alt=", "").replaceAll('"', "");
-      return s(o.replace(i[0], m));
-    };
-    return s(e);
-  }
-  focus(e = !1) {
-    if (this.isFocused()) return;
-    this.element.focus();
-    const t = l(this.element);
-    "selection" in t && (t.selection.selectAllChildren(this.element), e ? t.selection.collapseToStart() : t.selection.collapseToEnd(), d());
-  }
-  isFocused() {
-    return document.activeElement === this.element;
-  }
-  setDisabled(e) {
-    this.element.contentEditable = e ? "false" : "true";
-  }
-  handlePaste = async (e) => {
-    e.preventDefault();
-    const { clipboardData: t } = e;
-    if (!t) return;
-    const n = t.getData("text");
-    if (n) {
-      this.insertAtSelection(n), d();
-      return;
-    }
-  };
-  handleFocus = () => {
-    this.handlers.focusChange?.(!0);
-  };
-  handleBlur = () => {
-    this.handlers.focusChange?.(!1);
-  };
-  handleMouseDown = (e) => {
-    if (!(e.target instanceof HTMLImageElement)) return;
-    const t = new Range(), n = window.getSelection();
-    n && (t.selectNode(e.target), t.collapse(e.offsetX <= 8), n.removeAllRanges(), n.addRange(t));
-  };
-  checkContentChanged = () => {
-    const e = a(this.getText()), t = l(this.element);
-    if (!("range" in t)) return;
-    const n = E(this.element, t.range);
-    if (e === this.prevText && n.from === this.prevTextSelection.from && n.to === this.prevTextSelection.to)
-      return;
-    const s = e === `
-` && this.prevText.length > 0;
-    if (this.prevText = e, this.prevTextSelection = n, s) {
-      this.resetText("");
-      return;
-    }
-    this.handlers.contentChange.forEach((o) => o(e, n));
-  };
-  resolveDomPosition(e) {
-    const t = document.createTreeWalker(
-      this.element,
-      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
-    );
-    let n = e;
-    for (; t.nextNode(); ) {
-      const s = t.currentNode, o = h(s).length;
-      if (o >= n)
-        return g(s) && s.nodeName === "BR" && (n -= 1), {
-          container: s,
-          offset: Math.max(n, 0)
-        };
-      n -= o;
-    }
-    return {
-      container: this.element,
-      offset: this.element.childNodes.length
-    };
-  }
-}
-const C = (r) => r ? [{ kind: "Text", text: r }] : [];
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import c from "classnames";
+import { Spinner as b } from "./bundle.es7.js";
+import { Icon as h } from "./bundle.es36.js";
+import { attr as N } from "@companix/utils-browser";
+import { WriteBarInput as u } from "./bundle.es75.js";
+const w = (a) => {
+  const {
+    before: e,
+    after: t,
+    containerRef: i,
+    header: o,
+    contentClassName: n,
+    placeholder: m,
+    id: l,
+    onCreate: d,
+    className: p,
+    ...f
+  } = a;
+  return /* @__PURE__ */ s("div", { ref: i, ...f, className: c("write-bar", p), children: [
+    o,
+    /* @__PURE__ */ s("div", { className: c("write-bar-content", n), children: [
+      e && /* @__PURE__ */ r("div", { className: "write-bar-before", children: e }),
+      /* @__PURE__ */ r(
+        u,
+        {
+          className: "write-bar-input-wrapper",
+          placeholder: m,
+          placeholderClassName: "write-bar-placeholder",
+          inputClassName: "write-bar-input",
+          inputMode: "text",
+          id: l,
+          onCreate: d
+        }
+      ),
+      t && /* @__PURE__ */ r("div", { className: "write-bar-after", children: t })
+    ] })
+  ] });
+};
+w.IconButton = ({
+  Component: a = "button",
+  icon: e,
+  mode: t,
+  onClick: i,
+  isLoading: o,
+  isHidden: n
+}) => /* @__PURE__ */ r(
+  a,
+  {
+    onClick: i,
+    className: "write-bar-icon",
+    "data-mode": t,
+    "data-hidden": N(n),
+    children: o ? /* @__PURE__ */ r(b, { size: 18 }) : /* @__PURE__ */ r(h, { icon: e, size: "xxs" })
+  }
+);
 export {
-  k as Editor,
-  C as toTextChunksLite
+  w as WriteBar
 };