@companix/uikit 0.1.42 → 0.1.44

package/dist/bundle.es46.js

@@ -1,37 +1,62 @@
-import { jsx as h } from "react/jsx-runtime";
-import { useState as f, useEffect as i, createContext as w, useContext as v } from "react";
-import { getColorScheme as S, updateDOM as m } from "./bundle.es81.js";
-const d = w({
-  setColorScheme: () => {
-  }
-}), p = () => v(d), x = (u) => {
-  const { fixed: c, defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = u, [r, a] = f(() => c ? o : S(n, o)), s = (e) => {
-    c || (a(e), localStorage.setItem(n, e));
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import y from "classnames";
+import { useRef as F, useMemo as I, useState as o } from "react";
+const C = (a) => {
+  const {
+    previewSrc: e,
+    maskHeight: s,
+    maskWidth: t,
+    className: m,
+    src: l,
+    children: d,
+    enableAspectRatio: g,
+    imgAttrs: p,
+    ...f
+  } = a, h = F(null), u = I(() => N(t, s), [t, s]), [r, v] = o(!1), [x, n] = o(!1), [w, c] = o(!1), $ = () => {
+    x && (n(!1), c(!1));
   };
-  return i(() => {
-    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-    if (!e)
-      return;
-    const t = () => {
-      r === "system" && m("system");
-    };
-    return e.addEventListener?.("change", t), t(), () => {
-      e.removeEventListener?.("change", t);
-    };
-  }, [r]), i(() => {
-    if (!window)
-      return;
-    const e = (t) => {
-      t.key === n && (t.newValue ? a(t.newValue) : s(o));
-    };
-    return window.addEventListener("storage", e), () => {
-      window.removeEventListener("storage", e);
-    };
-  }, [s, o]), i(() => {
-    m(r);
-  }, [r]), /* @__PURE__ */ h(d.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: y("image-base", { "image-base-loading": !r }, m),
+      style: g ? { aspectRatio: t / s } : {},
+      onClickCapture: $,
+      ...f,
+      children: [
+        !r && /* @__PURE__ */ i("img", { className: "image-base-placeholder", src: u, alt: "" }),
+        e && e !== l && !r && !w && /* @__PURE__ */ i(
+          "img",
+          {
+            className: "image-base-preview",
+            src: e,
+            style: { maxWidth: `${t}px`, maxHeight: `${s}px` },
+            loading: "lazy",
+            decoding: "async",
+            onError: () => c(!0),
+            alt: ""
+          }
+        ),
+        /* @__PURE__ */ i(
+          "img",
+          {
+            ref: h,
+            className: "image-base-img",
+            src: l,
+            decoding: "async",
+            onLoad: () => v(!0),
+            onError: () => n(!0),
+            ...p,
+            alt: ""
+          }
+        ),
+        d
+      ]
+    }
+  );
+}, N = (a, e) => {
+  const s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${a} ${e}" width="${a}" height="${e}" />`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(s)}`;
 };
 export {
-  x as ThemeProvider,
-  p as useTheme
+  C as ImageBase
 };

package/dist/bundle.es47.js

@@ -1,24 +1,37 @@
-import { jsx as l } from "react/jsx-runtime";
-import { memo as n } from "react";
-const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
-  "script",
-  {
-    suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: {
-      __html: `(${a.toString()})("${t}", "${o}")`
-    }
-  }
-)), a = (t, o) => {
-  const [r, c] = ["theme-light", "theme-dark"];
-  try {
-    let e = localStorage.getItem(t) || o;
-    e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-    const s = e === "dark" ? c : r;
-    document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
-  } catch {
+import { jsx as h } from "react/jsx-runtime";
+import { useState as f, useEffect as i, createContext as w, useContext as v } from "react";
+import { getColorScheme as S, updateDOM as m } from "./bundle.es82.js";
+const d = w({
+  setColorScheme: () => {
   }
+}), p = () => v(d), x = (u) => {
+  const { fixed: c, defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = u, [r, a] = f(() => c ? o : S(n, o)), s = (e) => {
+    c || (a(e), localStorage.setItem(n, e));
+  };
+  return i(() => {
+    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+    if (!e)
+      return;
+    const t = () => {
+      r === "system" && m("system");
+    };
+    return e.addEventListener?.("change", t), t(), () => {
+      e.removeEventListener?.("change", t);
+    };
+  }, [r]), i(() => {
+    if (!window)
+      return;
+    const e = (t) => {
+      t.key === n && (t.newValue ? a(t.newValue) : s(o));
+    };
+    return window.addEventListener("storage", e), () => {
+      window.removeEventListener("storage", e);
+    };
+  }, [s, o]), i(() => {
+    m(r);
+  }, [r]), /* @__PURE__ */ h(d.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
 };
 export {
-  i as ColorSchemeScript,
-  a as colorSchemeScript
+  x as ThemeProvider,
+  p as useTheme
 };

package/dist/bundle.es48.js

@@ -1,52 +1,24 @@
-import { jsx as m } from "react/jsx-runtime";
-import { EventEmmiter as g } from "@companix/utils-js";
-import { useContext as S, createContext as l, useState as f, useEffect as n, useRef as w } from "react";
-const a = l({});
-class d {
-  constructor(e) {
-    this.emmiter = e;
+import { jsx as l } from "react/jsx-runtime";
+import { memo as n } from "react";
+const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
+  "script",
+  {
+    suppressHydrationWarning: !0,
+    dangerouslySetInnerHTML: {
+      __html: `(${a.toString()})("${t}", "${o}")`
+    }
   }
-  getStorageValue(e, t) {
-    if (typeof window > "u")
-      return t;
-    const r = localStorage.getItem(e);
-    return r ? JSON.parse(r) : t;
+)), a = (t, o) => {
+  const [r, c] = ["theme-light", "theme-dark"];
+  try {
+    let e = localStorage.getItem(t) || o;
+    e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    const s = e === "dark" ? c : r;
+    document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
+  } catch {
   }
-  setValue(e, t) {
-    localStorage.setItem(e, JSON.stringify(t)), this.emmiter.emit(e, t);
-  }
-}
-const x = (o, e) => {
-  const t = S(a), [r, i] = f(() => t.getStorageValue(o, e));
-  n(() => {
-    i(t.getStorageValue(o, e));
-  }, [o]);
-  const c = (s) => {
-    t.setValue(o, s);
-  };
-  return n(() => {
-    const s = t.emmiter.subscribe(o, (u) => {
-      i(u);
-    });
-    return () => {
-      s();
-    };
-  }, [o]), [r, c];
-}, y = ({ children: o }) => {
-  const e = w(new d(new g()));
-  return n(() => {
-    if (!window || !e.current)
-      return;
-    const t = (r) => {
-      r.key && e.current.emmiter.store[r.key] && r.newValue && e.current.emmiter.emit(r.key, JSON.parse(r.newValue));
-    };
-    return window.addEventListener("storage", t), () => {
-      window.removeEventListener("storage", t);
-    };
-  }, []), /* @__PURE__ */ m(a.Provider, { value: e.current, children: o });
 };
 export {
-  y as LocalStorageProvider,
-  d as LocalStorageService,
-  x as useLocalStorage
+  i as ColorSchemeScript,
+  a as colorSchemeScript
 };

package/dist/bundle.es49.js

@@ -1,14 +1,52 @@
-import { useState as r, useCallback as t } from "react";
-const f = (s = !1) => {
-  const [o, e] = r(s), a = t(() => {
-    e(!0);
-  }, []), l = t(() => {
-    e(!1);
-  }, []), u = t(() => {
-    e((n) => !n);
-  }, []);
-  return [o, a, l, u];
+import { jsx as m } from "react/jsx-runtime";
+import { EventEmmiter as g } from "@companix/utils-js";
+import { useContext as S, createContext as l, useState as f, useEffect as n, useRef as w } from "react";
+const a = l({});
+class d {
+  constructor(e) {
+    this.emmiter = e;
+  }
+  getStorageValue(e, t) {
+    if (typeof window > "u")
+      return t;
+    const r = localStorage.getItem(e);
+    return r ? JSON.parse(r) : t;
+  }
+  setValue(e, t) {
+    localStorage.setItem(e, JSON.stringify(t)), this.emmiter.emit(e, t);
+  }
+}
+const x = (o, e) => {
+  const t = S(a), [r, i] = f(() => t.getStorageValue(o, e));
+  n(() => {
+    i(t.getStorageValue(o, e));
+  }, [o]);
+  const c = (s) => {
+    t.setValue(o, s);
+  };
+  return n(() => {
+    const s = t.emmiter.subscribe(o, (u) => {
+      i(u);
+    });
+    return () => {
+      s();
+    };
+  }, [o]), [r, c];
+}, y = ({ children: o }) => {
+  const e = w(new d(new g()));
+  return n(() => {
+    if (!window || !e.current)
+      return;
+    const t = (r) => {
+      r.key && e.current.emmiter.store[r.key] && r.newValue && e.current.emmiter.emit(r.key, JSON.parse(r.newValue));
+    };
+    return window.addEventListener("storage", t), () => {
+      window.removeEventListener("storage", t);
+    };
+  }, []), /* @__PURE__ */ m(a.Provider, { value: e.current, children: o });
 };
 export {
-  f as useBooleanState
+  y as LocalStorageProvider,
+  d as LocalStorageService,
+  x as useLocalStorage
 };

package/dist/bundle.es50.js

@@ -1,16 +1,14 @@
-import { useRef as i, useCallback as o } from "react";
-const f = (e, s) => {
-  const r = i(null), c = i(void 0), n = o(
-    (t) => {
-      s && t.offsetParent && (t.style.height = "", t.style.height = `${t.scrollHeight}px`, t.scrollHeight !== c.current && e && (e(t), c.current = t.scrollHeight));
-    },
-    [s, e]
-  ), l = o(() => {
-    const t = r.current;
-    t && n(t);
-  }, [r, n]);
-  return [r, l];
+import { useState as r, useCallback as t } from "react";
+const f = (s = !1) => {
+  const [o, e] = r(s), a = t(() => {
+    e(!0);
+  }, []), l = t(() => {
+    e(!1);
+  }, []), u = t(() => {
+    e((n) => !n);
+  }, []);
+  return [o, a, l, u];
 };
 export {
-  f as useResizeTextarea
+  f as useBooleanState
 };

package/dist/bundle.es51.js

@@ -1,16 +1,16 @@
-import { useState as e } from "react";
-const d = ({ onClick: t }) => {
-  const [a, s] = e({ isLoading: !1, isError: !1 });
-  return { ...a, handleClick: (r) => {
-    a.isLoading || t(() => {
-      s({ isLoading: !0, isError: !1 });
-    }, r).then(() => {
-      s({ isLoading: !1, isError: !1 });
-    }).catch(() => {
-      s({ isLoading: !1, isError: !0 });
-    });
-  } };
+import { useRef as i, useCallback as o } from "react";
+const f = (e, s) => {
+  const r = i(null), c = i(void 0), n = o(
+    (t) => {
+      s && t.offsetParent && (t.style.height = "", t.style.height = `${t.scrollHeight}px`, t.scrollHeight !== c.current && e && (e(t), c.current = t.scrollHeight));
+    },
+    [s, e]
+  ), l = o(() => {
+    const t = r.current;
+    t && n(t);
+  }, [r, n]);
+  return [r, l];
 };
 export {
-  d as useLoading
+  f as useResizeTextarea
 };

package/dist/bundle.es52.js

@@ -1,33 +1,16 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useState as w, useEffect as i, useRef as d, useCallback as f, createContext as C, useContext as b } from "react";
-const k = 6e4, a = C(null), g = ({ children: t }) => {
-  const r = d(/* @__PURE__ */ new Map()), s = f(
-    (e, c) => {
-      let n = r.current.get(e);
-      return n || (n = {
-        intervalId: window.setInterval(() => {
-          const o = Date.now();
-          n?.callbacks.forEach((l) => l(o));
-        }, e),
-        callbacks: /* @__PURE__ */ new Set()
-      }, r.current.set(e, n)), n.callbacks.add(c), () => {
-        const o = r.current.get(e);
-        o && (o.callbacks.delete(c), o.callbacks.size === 0 && (window.clearInterval(o.intervalId), r.current.delete(e)));
-      };
-    },
-    []
-  );
-  return /* @__PURE__ */ u(a.Provider, { value: s, children: t });
-}, x = () => {
-  const t = b(a);
-  if (t === null)
-    throw new Error("NowContextProvider is not provided");
-  return t;
-}, p = (t = k) => {
-  const [r, s] = w(() => Date.now()), e = x();
-  return i(() => e(t, s), [t, e]), r;
+import { useState as e } from "react";
+const d = ({ onClick: t }) => {
+  const [a, s] = e({ isLoading: !1, isError: !1 });
+  return { ...a, handleClick: (r) => {
+    a.isLoading || t(() => {
+      s({ isLoading: !0, isError: !1 });
+    }, r).then(() => {
+      s({ isLoading: !1, isError: !1 });
+    }).catch(() => {
+      s({ isLoading: !1, isError: !0 });
+    });
+  } };
 };
 export {
-  g as NowContextProvider,
-  p as useNow
+  d as useLoading
 };

package/dist/bundle.es53.js

@@ -1,14 +1,33 @@
-import { useRef as o } from "react";
-import { useRerender as u } from "./bundle.es74.js";
-const m = (e) => {
-  const t = u(), r = o(e);
-  return [
-    r.current,
-    (n) => {
-      r.current = n, t();
-    }
-  ];
+import { jsx as u } from "react/jsx-runtime";
+import { useState as w, useEffect as i, useRef as d, useCallback as f, createContext as C, useContext as b } from "react";
+const k = 6e4, a = C(null), g = ({ children: t }) => {
+  const r = d(/* @__PURE__ */ new Map()), s = f(
+    (e, c) => {
+      let n = r.current.get(e);
+      return n || (n = {
+        intervalId: window.setInterval(() => {
+          const o = Date.now();
+          n?.callbacks.forEach((l) => l(o));
+        }, e),
+        callbacks: /* @__PURE__ */ new Set()
+      }, r.current.set(e, n)), n.callbacks.add(c), () => {
+        const o = r.current.get(e);
+        o && (o.callbacks.delete(c), o.callbacks.size === 0 && (window.clearInterval(o.intervalId), r.current.delete(e)));
+      };
+    },
+    []
+  );
+  return /* @__PURE__ */ u(a.Provider, { value: s, children: t });
+}, x = () => {
+  const t = b(a);
+  if (t === null)
+    throw new Error("NowContextProvider is not provided");
+  return t;
+}, p = (t = k) => {
+  const [r, s] = w(() => Date.now()), e = x();
+  return i(() => e(t, s), [t, e]), r;
 };
 export {
-  m as useSyncSubmit
+  g as NowContextProvider,
+  p as useNow
 };

package/dist/bundle.es54.js

@@ -1,29 +1,14 @@
-import { jsx as i } from "react/jsx-runtime";
-import { hash as m } from "@companix/utils-js";
-import { useRef as n, useMemo as s } from "react";
-import { Viewport as p } from "./bundle.es82.js";
-const a = (t = {}) => {
-  const e = {
-    emit: (r) => {
-      console.error("uninitialized", r);
+import { useRef as o } from "react";
+import { useRerender as u } from "./bundle.es75.js";
+const m = (e) => {
+  const t = u(), r = o(e);
+  return [
+    r.current,
+    (n) => {
+      r.current = n, t();
     }
-  };
-  return {
-    api: {
-      show: (r) => {
-        e.emit({ ...r, id: m() });
-      }
-    },
-    Viewport: () => {
-      const r = n(null);
-      return s(() => {
-        e.emit = (o) => {
-          r.current && r.current.showAlert(o);
-        };
-      }, []), /* @__PURE__ */ i(p, { ref: r, ...t });
-    }
-  };
+  ];
 };
 export {
-  a as createAlertAgent
+  m as useSyncSubmit
 };

package/dist/bundle.es55.js

@@ -1,41 +1,29 @@
-import { jsx as t } from "react/jsx-runtime";
-import { hash as r } from "@companix/utils-js";
-import { Viewport as a } from "./bundle.es83.js";
-import { useRef as c, useMemo as h } from "react";
-const m = (i = {}) => {
-  const o = {
-    showToast: (e) => {
-      console.error("uninitialized", e);
+import { jsx as i } from "react/jsx-runtime";
+import { hash as m } from "@companix/utils-js";
+import { useRef as n, useMemo as s } from "react";
+import { Viewport as p } from "./bundle.es83.js";
+const a = (t = {}) => {
+  const e = {
+    emit: (r) => {
+      console.error("uninitialized", r);
     }
   };
   return {
     api: {
-      show: (e) => {
-        const n = e.id ?? r();
-        return o.showToast({ ...e, id: n }), n;
+      show: (r) => {
+        e.emit({ ...r, id: m() });
       }
     },
-    Viewport: (e = {}) => {
-      const n = c(null);
-      return h(() => {
-        o.showToast = (s) => {
-          n.current && n.current.showToast(s);
+    Viewport: () => {
+      const r = n(null);
+      return s(() => {
+        e.emit = (o) => {
+          r.current && r.current.showAlert(o);
         };
-      }, []), /* @__PURE__ */ t(
-        a,
-        {
-          ref: n,
-          align: e.align ?? i.align,
-          closeIcon: e.closeIcon ?? i.closeIcon,
-          duration: e.duration ?? i.duration,
-          gap: e.gap ?? i.gap,
-          side: e.side ?? i.side,
-          swipeThreshold: e.swipeThreshold ?? i.swipeThreshold
-        }
-      );
+      }, []), /* @__PURE__ */ i(p, { ref: r, ...t });
     }
   };
 };
 export {
-  m as createToaster
+  a as createAlertAgent
 };

package/dist/bundle.es56.js

@@ -1,53 +1,41 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-toast";
-import { attr as T } from "@companix/utils-browser";
-import { useState as d, useRef as b, useEffect as j, useLayoutEffect as E } from "react";
-import { RemoveListener as I } from "./bundle.es60.js";
-const m = (o) => {
-  const [r, u] = d(!0), [p, f] = d(!1), s = b(null), {
-    appearance: C = "neutral",
-    icon: a,
-    title: n,
-    description: c,
-    duration: L,
-    closeIcon: h,
-    onClosing: v,
-    onClosed: N,
-    closable: x = !0,
-    onInitialized: g
-  } = o;
-  j(() => {
-    f(!0);
-  }, []), E(() => {
-    s.current && g(s.current);
-  }, []);
-  const R = (i) => {
-    i || v(), u(i);
+import { jsx as t } from "react/jsx-runtime";
+import { hash as r } from "@companix/utils-js";
+import { Viewport as a } from "./bundle.es84.js";
+import { useRef as c, useMemo as h } from "react";
+const m = (i = {}) => {
+  const o = {
+    showToast: (e) => {
+      console.error("uninitialized", e);
+    }
   };
-  return /* @__PURE__ */ l(
-    t.Root,
-    {
-      ref: s,
-      "data-expanded": !0,
-      "data-appearance": C,
-      "data-mounted": T(p),
-      className: "toaster",
-      open: r,
-      onOpenChange: R,
-      duration: L,
-      children: [
-        /* @__PURE__ */ e(I, { callback: N }),
-        a && /* @__PURE__ */ e("div", { className: "toaster-icon", children: a }),
-        /* @__PURE__ */ l("div", { className: "toaster-content", children: [
-          n && /* @__PURE__ */ e(t.Title, { className: "toaster-title", children: n }),
-          c && /* @__PURE__ */ e(t.Description, { className: "toaster-description", children: c })
-        ] }),
-        x && /* @__PURE__ */ e(m.Close, { className: "toaster-close toaster-close-placement", closeIcon: h })
-      ]
+  return {
+    api: {
+      show: (e) => {
+        const n = e.id ?? r();
+        return o.showToast({ ...e, id: n }), n;
+      }
+    },
+    Viewport: (e = {}) => {
+      const n = c(null);
+      return h(() => {
+        o.showToast = (s) => {
+          n.current && n.current.showToast(s);
+        };
+      }, []), /* @__PURE__ */ t(
+        a,
+        {
+          ref: n,
+          align: e.align ?? i.align,
+          closeIcon: e.closeIcon ?? i.closeIcon,
+          duration: e.duration ?? i.duration,
+          gap: e.gap ?? i.gap,
+          side: e.side ?? i.side,
+          swipeThreshold: e.swipeThreshold ?? i.swipeThreshold
+        }
+      );
     }
-  );
+  };
 };
-m.Close = ({ closeIcon: o, className: r } = {}) => /* @__PURE__ */ e(t.Close, { className: r, children: o ?? /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" }) }) });
 export {
-  m as Toast
+  m as createToaster
 };