@kolking/react-ui 1.9.0 → 1.9.2

package/dist/components/Avatar/Avatar.js

@@ -13,14 +13,14 @@ const b = (a, e) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.
   size: a = 50,
   name: e,
   email: o,
-  src: n,
+  src: c,
   colorize: v,
-  className: d,
-  style: u,
+  className: u,
+  style: d,
   children: g,
   ...f
 }) => {
-  const t = e?.trim(), p = v && t ? k(t) : void 0, s = x(() => n || (o ? M(a, o) : void 0), [n, a, o]), [c, l] = A(s);
+  const t = e?.trim(), p = v && t ? k(t) : void 0, s = x(() => c || (o ? M(a, o) : void 0), [c, a, o]), [n, l] = A(s);
   N(() => {
     l(s);
   }, [s]);
@@ -28,23 +28,23 @@ const b = (a, e) => /* @__PURE__ */ m.createElement("svg", { xmlns: "http://www.
     l(void 0);
   }, []);
   return /* @__PURE__ */ _(
-    "div",
+    "figure",
     {
       ...f,
       "data-avatar": !0,
-      className: h(r.avatar, d),
-      style: { ...u, ...C({ size: a, backgroundColor: p }) },
+      className: h(r.avatar, u),
+      style: { ...d, ...C({ size: a, backgroundColor: p }) },
       children: [
-        c ? /* @__PURE__ */ i(
+        n ? /* @__PURE__ */ i(
           "img",
           {
             "data-avatar-image": !0,
             className: r.image,
-            src: c,
+            src: n,
             alt: t ?? "",
             onError: w
           }
-        ) : t ? /* @__PURE__ */ i("span", { "data-avatar-initials": !0, className: r.initials, children: R(t) }) : /* @__PURE__ */ i(j, { "aria-hidden": !0, "data-avatar-default": !0, className: r.default }),
+        ) : t ? /* @__PURE__ */ i("figcaption", { "data-avatar-initials": !0, className: r.initials, children: R(t) }) : /* @__PURE__ */ i(j, { "aria-hidden": !0, "data-avatar-default": !0, className: r.default }),
         g
       ]
     }

package/dist/components/Avatar/helpers.js

@@ -1,22 +1,21 @@
-import { md5 as r } from "js-md5";
-function n(i, t) {
-  const e = r(t.toLowerCase().trim()), o = window.devicePixelRatio * i;
-  return `https://www.gravatar.com/avatar/${e}?s=${o}&d=404`;
+import { md5 as o } from "js-md5";
+function l(e, t) {
+  const i = o(t.toLowerCase().trim()), r = window.devicePixelRatio || 1, n = Math.round(r * e);
+  return `https://www.gravatar.com/avatar/${i}?s=${n}&d=404`;
 }
-function l(i) {
-  const t = i.trim().split(/\s+/gu) || [];
-  let e = [...t.shift() || ""][0];
-  return t.length > 0 && (e += [...t.pop() || ""][0]), e.toUpperCase();
+function s(e) {
+  const t = e.trim().split(/\s+/gu).filter(Boolean);
+  return t.length === 0 ? "" : ([...t[0]][0] + (t.length > 1 ? [...t[t.length - 1]][0] : "")).toUpperCase();
 }
-function s(i) {
+function h(e) {
   let t = 0;
-  if (i.length > 0)
-    for (let e = 0; e < i.length; e += 1)
-      t = i.charCodeAt(e) + ((t << 5) - t), t &= t;
-  return `hsl(${t % 360}, 75%, 50%)`;
+  if (e.length > 0)
+    for (let r = 0; r < e.length; r += 1)
+      t = e.charCodeAt(r) + ((t << 5) - t), t &= t;
+  return `hsl(${(t % 360 + 360) % 360}, 75%, 50%)`;
 }
 export {
-  n as getGravatarUri,
-  l as getInitials,
-  s as getStringColor
+  l as getGravatarUri,
+  s as getInitials,
+  h as getStringColor
 };

package/dist/components/Badge/Badge.js

@@ -2,7 +2,7 @@ import { jsx as h } from "react/jsx-runtime";
 import { useRef as _, useLayoutEffect as w, useEffect as l } from "react";
 import E from "classnames";
 import { wrapNode as P, cssProps as H } from "../../utils/helpers.js";
-const M = "Badge_badge_-mEE7", k = "Badge_appear_LbxbS", x = "Badge_accent_BIYve", L = "Badge_gray_7jA-J", v = "Badge_brown_x1GS7", I = "Badge_red_zPgCR", R = "Badge_orange_EoLmF", S = "Badge_yellow_qvbb6", X = "Badge_green_XX-1c", j = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_pink_T5H--", d = {
+const M = "Badge_badge_-mEE7", k = "Badge_appear_LbxbS", x = "Badge_accent_BIYve", L = "Badge_gray_7jA-J", v = "Badge_brown_x1GS7", I = "Badge_red_zPgCR", R = "Badge_orange_EoLmF", S = "Badge_yellow_qvbb6", X = "Badge_green_XX-1c", j = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_pink_T5H--", c = {
   badge: M,
   appear: k,
   accent: x,
@@ -35,15 +35,15 @@ const A = ({
   style: f,
   ...y
 }) => {
-  const e = !r, g = T(e), t = _(null);
+  const e = !r, d = T(e), t = _(null);
   if (w(() => {
-    g && !e && t.current?.classList.add(d.appear);
-  }, [g, e]), l(() => {
-    if (!e && a && t.current) {
-      const i = t.current.clientHeight, c = t.current.parentElement, p = c ? Math.min(
-        parseInt(getComputedStyle(c).getPropertyValue("border-radius")),
-        c.clientHeight / 2
-      ) : 0, b = p * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(p / i, 1)) * (i / 4);
+    d && !e && t.current?.classList.add(c.appear);
+  }, [d, e]), l(() => {
+    if (!e && a && t.current?.parentElement) {
+      const g = t.current.clientHeight, p = t.current.parentElement, i = Math.min(
+        parseInt(getComputedStyle(p).getPropertyValue("border-radius")) || 0,
+        p.clientHeight / 2
+      ), b = i * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(i / g, 1)) * (g / 4);
       t.current.style.setProperty("--offset", `${b - m}px`);
     }
   }, [e, a]), e)
@@ -56,7 +56,7 @@ const A = ({
       ref: t,
       "data-badge": n,
       "data-placement": a,
-      className: E(d.badge, d[n], u),
+      className: E(c.badge, c[n], u),
       style: { ...f, ...H({ size: o }) },
       children: P(B ? `${s}+` : r, "span")
     }

package/dist/components/Dialog/Dialog.d.ts

@@ -7,7 +7,7 @@ export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
     width?: React.CSSProperties['width'];
     lockScroll?: boolean;
     requestClose: () => void;
-    setTriggerProps?: React.Dispatch<React.SetStateAction<object>>;
+    setTriggerProps?: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     open?: boolean;
@@ -15,7 +15,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<React.HTMLAttribute
     width?: React.CSSProperties["width"];
     lockScroll?: boolean;
     requestClose: () => void;
-    setTriggerProps?: React.Dispatch<React.SetStateAction<object>>;
+    setTriggerProps?: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const DialogTitle: ({ className, children, ...props }: Omit<HeadingProps, "title">) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogContent: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/useDialog.d.ts

@@ -1,22 +1,28 @@
-export type DialogOptions<T, R> = {
+export type DialogShowOptions<R> = {
+    onConfirm?: (values: R) => void;
+    onCancel?: () => void;
+};
+export type DialogOptions<T, R> = DialogShowOptions<R> & {
     defaultOpen?: boolean;
     onShow?: (values: T) => void;
-    onConfirm?: (result: R) => void;
-    onCancel?: () => void;
 };
 export type DialogType<T, R> = ReturnType<typeof useDialog<T, R>>;
 export declare function useDialog<T, R>(options?: DialogOptions<T, R>): {
     props: {
         ref: import('react').RefObject<HTMLDivElement | null>;
         open: boolean;
-        setTriggerProps: import('react').Dispatch<import('react').SetStateAction<{}>>;
+        setTriggerProps: import('react').Dispatch<import('react').SetStateAction<Record<string, unknown>>>;
         requestClose: () => void;
     };
+    triggerProps: Record<string, unknown>;
+    /**
+     * @deprecated The property will be removed in the next major release
+     */
     trigger: {
-        onClick: (values: T) => void;
+        onClick: (values: T, showOptions?: DialogShowOptions<R>) => void;
     };
     data: T | undefined;
-    show: (values: T) => void;
+    show: (values: T, showOptions?: DialogShowOptions<R>) => void;
     cancel: () => void;
     confirm: (values: R) => void;
     preventClose: <T_1>(promise: Promise<T_1>) => Promise<T_1>;

package/dist/components/Dialog/useDialog.js

@@ -1,32 +1,36 @@
-import { useRef as u, useState as a, useCallback as t } from "react";
-import { afterTransition as y } from "../../utils/helpers.js";
-function h(s) {
-  const c = u(null), n = u(s), r = u(!1), [g, d] = a({}), [m, f] = a(s?.defaultOpen ?? !1), [C, i] = a();
+import { useRef as c, useState as f, useCallback as t } from "react";
+import { afterTransition as v } from "../../utils/helpers.js";
+function S(s) {
+  const u = c(null), e = c(!1), n = c(s), a = c(void 0), [i, g] = f({}), [m, l] = f(s?.defaultOpen ?? !1), [w, p] = f();
   n.current = s;
-  const l = t((e) => {
-    r.current || (f(!0), i(e), n.current?.onShow?.(e));
-  }, []), o = t((e) => {
-    r.current || (r.current = !0, c.current?.setAttribute("data-open", "false"), y(c.current, () => {
-      e !== void 0 ? n.current?.onConfirm?.(e) : n.current?.onCancel?.(), f(!1), i(void 0), r.current = !1;
+  const C = t((r, h = {}) => {
+    e.current || (a.current = h, l(!0), p(r), n.current?.onShow?.(r));
+  }, []), o = t((r) => {
+    e.current || (e.current = !0, u.current?.setAttribute("data-open", "false"), v(u.current, () => {
+      r !== void 0 ? (n.current?.onConfirm?.(r), a.current?.onConfirm?.(r)) : (n.current?.onCancel?.(), a.current?.onCancel?.()), l(!1), p(void 0), e.current = !1;
     }));
-  }, []), p = t(() => o(), [o]), b = t((e) => o(e), [o]), w = t(async (e) => {
-    r.current = !0;
+  }, []), d = t(() => o(), [o]), O = t((r) => o(r), [o]), b = t(async (r) => {
+    e.current = !0;
     try {
-      return await e;
+      return await r;
     } finally {
-      r.current = !1;
+      e.current = !1;
     }
   }, []);
   return {
-    props: { ref: c, open: m, setTriggerProps: d, requestClose: p },
-    trigger: { ...g, onClick: l },
-    data: C,
-    show: l,
-    cancel: p,
-    confirm: b,
-    preventClose: w
+    props: { ref: u, open: m, setTriggerProps: g, requestClose: d },
+    triggerProps: i,
+    /**
+     * @deprecated The property will be removed in the next major release
+     */
+    trigger: { ...i, onClick: C },
+    data: w,
+    show: C,
+    cancel: d,
+    confirm: O,
+    preventClose: b
   };
 }
 export {
-  h as useDialog
+  S as useDialog
 };

package/dist/components/Dialog/withDialog.d.ts

@@ -1,12 +1,18 @@
 import { default as React } from 'react';
 import { DialogProps } from './Dialog';
-import { DialogOptions, DialogType } from './useDialog';
+import { DialogOptions, DialogShowOptions, DialogType } from './useDialog';
 type PartialDialogProps = Omit<DialogProps, 'children' | 'ref' | 'requestClose'>;
 type ComponentProps<T, R> = PartialDialogProps & DialogOptions<T, R> & {
-    children: (dialog: DialogType<T, R>) => React.ReactNode;
+    children: React.ReactNode | ((dialog: DialogType<T, R>) => React.ReactNode);
 };
 export type WithDialogProps<T extends object, R> = T & {
     dialog: DialogType<T, R>;
 };
-export declare function withDialog<T extends object, R>(Component: React.ComponentType<WithDialogProps<T, R>>, withProps?: PartialDialogProps): React.ComponentType<ComponentProps<T, R>>;
+export declare function withDialog<T extends object, R>(Component: React.ComponentType<WithDialogProps<T, R>>, withProps?: PartialDialogProps): {
+    ({ children, defaultOpen, onShow, onConfirm, onCancel, ...props }: ComponentProps<T, R>): import("react/jsx-runtime").JSX.Element;
+    useTrigger(): {
+        props: Record<string, unknown>;
+        show(_values: T, _showOptions?: DialogShowOptions<R>): void;
+    };
+};
 export {};

package/dist/components/Dialog/withDialog.js

@@ -1,22 +1,32 @@
-import { jsxs as d, Fragment as g, jsx as r } from "react/jsx-runtime";
-import { Dialog as f } from "./Dialog.js";
-import { useDialog as u } from "./useDialog.js";
-function j(t, i) {
-  function a({
-    children: n,
-    defaultOpen: p,
-    onShow: e,
-    onConfirm: s,
-    onCancel: l,
-    ...m
+import { jsxs as h, Fragment as w, jsx as r } from "react/jsx-runtime";
+import i, { useMemo as x } from "react";
+import { Dialog as d } from "./Dialog.js";
+import { useDialog as D } from "./useDialog.js";
+function j(a, p) {
+  const e = i.createContext({
+    props: {},
+    show(t, n) {
+      throw new Error("Dialog context is not available");
+    }
+  });
+  function s({
+    children: t,
+    defaultOpen: n,
+    onShow: u,
+    onConfirm: g,
+    onCancel: c,
+    ...l
   }) {
-    const o = u({ defaultOpen: p, onShow: e, onConfirm: s, onCancel: l }), c = { ...i, ...m, ...o.props };
-    return /* @__PURE__ */ d(g, { children: [
-      n(o),
-      /* @__PURE__ */ r(f, { ...c, children: o.data && /* @__PURE__ */ r(t, { ...o.data, dialog: o }) })
+    const o = D({ defaultOpen: n, onShow: u, onConfirm: g, onCancel: c }), m = { ...p, ...l, ...o.props }, f = x(() => ({
+      props: o.triggerProps,
+      show: o.show
+    }), [o.show, o.triggerProps]);
+    return /* @__PURE__ */ h(w, { children: [
+      /* @__PURE__ */ r(e, { value: f, children: typeof t == "function" ? t(o) : t }),
+      /* @__PURE__ */ r(d, { ...m, children: o.data && /* @__PURE__ */ r(a, { ...o.data, dialog: o }) })
     ] });
   }
-  return a;
+  return s.useTrigger = () => i.useContext(e), s;
 }
 export {
   j as withDialog

package/dist/components/Fields/Checkbox.js

@@ -1,28 +1,28 @@
-import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
 import i from "classnames";
-import p, { useRef as x, useImperativeHandle as b, useEffect as k } from "react";
+import k, { useRef as x, useImperativeHandle as b, useEffect as p } from "react";
 import { cssProps as R } from "../../utils/helpers.js";
-import { I as y, s as l } from "../../Input-BG84zXZH.js";
-const q = p.forwardRef(
-  ({ size: c, error: n, label: t, className: u, style: f, required: m, indeterminate: r, ...o }, d) => {
-    const s = o.checked, e = x(null);
-    return b(d, () => e.current), k(() => {
-      r != null && e.current != null && (e.current.indeterminate = !s && r);
-    }, [e, r, s]), /* @__PURE__ */ h(
+import { I as y, s } from "../../Input-BG84zXZH.js";
+const _ = k.forwardRef(
+  ({ size: t, error: u, label: a, className: f, style: n, required: d, indeterminate: c, ...r }, m) => {
+    const l = r.checked || r.defaultChecked, e = x(null);
+    return b(m, () => e.current), p(() => {
+      c != null && e.current != null && (e.current.indeterminate = !l && c);
+    }, [e, c, l]), /* @__PURE__ */ h(
       "label",
       {
         "data-checkbox": !0,
-        "data-required": m,
-        className: i(l.checkbox, u),
-        style: { ...f, ...R({ size: c }) },
+        "data-required": d,
+        className: i(s.checkbox, f),
+        style: { ...n, ...R({ size: t }) },
         children: [
-          /* @__PURE__ */ a(y, { ...o, ref: e, type: "checkbox", size: c, error: n }),
-          t && /* @__PURE__ */ a("div", { "data-checkbox-label": !0, className: l.label, children: t })
+          /* @__PURE__ */ o(y, { ...r, ref: e, type: "checkbox", size: t, error: u }),
+          a && /* @__PURE__ */ o("div", { "data-checkbox-label": !0, className: s.label, children: a })
         ]
       }
     );
   }
 );
 export {
-  q as Checkbox
+  _ as Checkbox
 };

package/dist/components/Gallery/Gallery.js

@@ -1,45 +1,46 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
 import { useRef as C, useState as v, useEffect as w } from "react";
 import j from "classnames";
 import { Composite as x } from "@floating-ui/react";
 import { cssProps as R } from "../../utils/helpers.js";
 import { s as S } from "../../styles.module-D0C-vMZX.js";
 const O = ({
-  gap: s,
-  loop: o = !1,
+  gap: o,
+  loop: l = !1,
   cols: e = "auto",
   itemSize: n,
   objectFit: m,
-  marginStart: l,
-  marginEnd: u,
-  className: a,
-  style: c,
-  children: i,
-  ...f
+  marginStart: u,
+  marginEnd: a,
+  className: c,
+  style: i,
+  children: f,
+  ...p
 }) => {
-  const t = C(null), [p, g] = v(e === "auto" ? 1 : e);
+  const t = C(null), [s, g] = v(e === "auto" ? 1 : e);
   return w(() => {
     const r = new ResizeObserver((y) => {
-      const b = window.getComputedStyle(y[0].target).gridTemplateColumns;
-      g(b.split(" ").length);
+      const d = window.getComputedStyle(y[0].target).gridTemplateColumns;
+      g(d.split(" ").length);
     });
     return t.current && (e === "auto" ? r.observe(t.current) : r.unobserve(t.current)), () => {
       r.disconnect();
     };
-  }, [e]), /* @__PURE__ */ d(
+  }, [e]), /* @__PURE__ */ b(
     x,
     {
-      ...f,
+      ...p,
       ref: t,
-      loop: o,
-      cols: p,
+      loop: l,
+      cols: s,
       "data-gallery": !0,
-      className: j(S.gallery, a),
+      "data-gallery-cols": s,
+      className: j(S.gallery, c),
       style: {
-        ...c,
-        ...R({ gap: s, marginStart: l, marginEnd: u, itemSize: n, imageObjectFit: m })
+        ...i,
+        ...R({ gap: o, marginStart: u, marginEnd: a, itemSize: n, imageObjectFit: m })
       },
-      children: i
+      children: f
     }
   );
 };