@tempots/beatui 0.82.0 → 0.82.1

package/dist/modal-v3u2Fpnd.js

@@ -0,0 +1,488 @@
+import { WithElement as q, OnDispose as W, WithBrowserCtx as z, Value as j, render as R, html as E, dataAttr as F, attr as f, computedOf as A, prop as U, aria as B, on as H, When as O, Use as _, Fragment as K, coalesce as S } from "@tempots/dom";
+import { u as G } from "./use-animated-toggle-ChycsEoj.js";
+import { g as J } from "./timer-Rd2sKnvH.js";
+import { s as N } from "./session-id-3KiilioY.js";
+import { B as P } from "./translations-Cq8bUKJP.js";
+import { C as Q } from "./use-form-B56E_x5Y.js";
+import { B as D } from "./input-container-DiCjOzR2.js";
+const X = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+  "audio[controls]",
+  "video[controls]",
+  "details > summary:first-of-type",
+  "details[open]"
+].join(", ");
+function Y(c) {
+  return Array.from(c.querySelectorAll(X)).filter(
+    (e) => {
+      const s = e;
+      return s.offsetWidth > 0 && s.offsetHeight > 0 && !s.hasAttribute("inert") && window.getComputedStyle(s).visibility !== "hidden";
+    }
+  );
+}
+function $(c = {}) {
+  const {
+    active: e = !0,
+    escapeDeactivates: s = !0,
+    onEscape: t,
+    initialFocus: n,
+    returnFocus: r,
+    clickOutsideDeactivates: l = !1,
+    onClickOutside: u
+  } = c;
+  return q((g) => {
+    let h = e, m = null, i = [], b = null, p = null, d = null;
+    typeof document < "u" && (m = document.activeElement);
+    const y = () => {
+      i = Y(g);
+    }, x = (a) => {
+      if (h) {
+        if (s && a.key === "Escape") {
+          a.preventDefault(), t?.();
+          return;
+        }
+        if (a.key === "Tab") {
+          if (y(), i.length === 0) {
+            a.preventDefault();
+            return;
+          }
+          const o = i.indexOf(
+            document.activeElement
+          );
+          a.shiftKey ? o <= 0 && (a.preventDefault(), i[i.length - 1]?.focus()) : o >= i.length - 1 && (a.preventDefault(), i[0]?.focus());
+        }
+      }
+    }, v = (a) => {
+      if (!h || !l) return;
+      const o = a.target;
+      g.contains(o) || u?.();
+    }, k = () => {
+      if (!h) return;
+      y();
+      let a = null;
+      typeof n == "function" ? a = n() : n ? a = n : i.length > 0 && (a = i[0]), a && (p = setTimeout(() => {
+        p = null, a?.focus();
+      }, 50)), document.addEventListener("keydown", x, !0), l && document.addEventListener("click", v, !0);
+    }, w = () => {
+      h = !1, document.removeEventListener("keydown", x, !0), document.removeEventListener("click", v, !0);
+      let a = null;
+      typeof r == "function" ? a = r() : r ? a = r : m && (a = m), a && document.body.contains(a) && (d = setTimeout(() => {
+        d = null, a?.focus();
+      }, 0));
+    };
+    return b = setTimeout(() => {
+      b = null, k();
+    }, 0), W(() => {
+      b != null && clearTimeout(b), p != null && clearTimeout(p), d != null && clearTimeout(d), w();
+    });
+  });
+}
+function de(c = {}) {
+  return {
+    activate: () => $({ ...c, active: !0 }),
+    deactivate: () => $({ ...c, active: !1 })
+  };
+}
+function Z(c) {
+  return {
+    "~standard": {
+      version: 1,
+      vendor: "beatui-custom",
+      validate: (s) => {
+        const t = c.validate(s);
+        return t.success ? { value: t.data } : {
+          issues: t.errors.map((n) => ({
+            message: n.message,
+            path: n.path
+          }))
+        };
+      },
+      types: void 0
+    },
+    safeParse: (s) => {
+      const t = c.validate(s);
+      return t.success ? { success: !0, data: t.data } : {
+        success: !1,
+        error: {
+          errors: t.errors.map((n) => ({
+            message: n.message,
+            path: n.path?.map(
+              (r) => typeof r == "object" && "key" in r ? r.key.toString() : r.toString()
+            ) || []
+          }))
+        }
+      };
+    }
+  };
+}
+class T {
+  optional() {
+    return new ee(this);
+  }
+  default(e) {
+    return new te(this, e);
+  }
+  schema() {
+    return Z(this);
+  }
+}
+class C extends T {
+  minLength;
+  maxLength;
+  pattern;
+  customValidations = [];
+  validate(e) {
+    if (typeof e != "string")
+      return { success: !1, errors: [{ message: "Expected string" }] };
+    const s = [];
+    this.minLength !== void 0 && e.length < this.minLength && s.push({ message: `Must be at least ${this.minLength} characters` }), this.maxLength !== void 0 && e.length > this.maxLength && s.push({ message: `Must be at most ${this.maxLength} characters` }), this.pattern && !this.pattern.test(e) && s.push({ message: "Invalid format" });
+    for (const t of this.customValidations) {
+      const n = t(e);
+      n && s.push({ message: n });
+    }
+    return s.length > 0 ? { success: !1, errors: s } : { success: !0, data: e };
+  }
+  min(e, s) {
+    const t = new C();
+    return t.minLength = e, t.maxLength = this.maxLength, t.pattern = this.pattern, t.customValidations = [...this.customValidations], s && t.customValidations.push(
+      (n) => n.length < e ? s : null
+    ), t;
+  }
+  max(e, s) {
+    const t = new C();
+    return t.minLength = this.minLength, t.maxLength = e, t.pattern = this.pattern, t.customValidations = [...this.customValidations], s && t.customValidations.push(
+      (n) => n.length > e ? s : null
+    ), t;
+  }
+  regex(e, s) {
+    const t = new C();
+    return t.minLength = this.minLength, t.maxLength = this.maxLength, t.pattern = e, t.customValidations = [...this.customValidations], s && t.customValidations.push(
+      (n) => e.test(n) ? null : s
+    ), t;
+  }
+  email(e = "Please enter a valid email address") {
+    const s = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, t = new C();
+    return t.minLength = this.minLength, t.maxLength = this.maxLength, t.pattern = this.pattern, t.customValidations = [
+      ...this.customValidations,
+      (n) => s.test(n) ? null : e
+    ], t;
+  }
+  refine(e) {
+    const s = new C();
+    return s.minLength = this.minLength, s.maxLength = this.maxLength, s.pattern = this.pattern, s.customValidations = [...this.customValidations, e], s;
+  }
+}
+class V extends T {
+  mustBeTrue = !1;
+  trueMessage;
+  validate(e) {
+    return typeof e != "boolean" ? { success: !1, errors: [{ message: "Expected boolean" }] } : this.mustBeTrue && e !== !0 ? {
+      success: !1,
+      errors: [{ message: this.trueMessage || "Must be true" }]
+    } : { success: !0, data: e };
+  }
+  refine(e, s) {
+    const t = new V();
+    t.mustBeTrue = this.mustBeTrue, t.trueMessage = this.trueMessage;
+    const n = t.validate.bind(t);
+    return t.validate = (r) => {
+      const l = n(r);
+      return l.success ? e(l.data) ? l : { success: !1, errors: [{ message: s }] } : l;
+    }, t;
+  }
+  literal(e, s) {
+    const t = new V();
+    return t.mustBeTrue = !0, t.trueMessage = s, t;
+  }
+}
+class ee extends T {
+  constructor(e) {
+    super(), this.inner = e;
+  }
+  validate(e) {
+    if (e === void 0)
+      return { success: !0, data: void 0 };
+    const s = this.inner.validate(e);
+    return s.success ? { success: !0, data: s.data } : { success: !1, errors: s.errors };
+  }
+}
+class te extends T {
+  constructor(e, s) {
+    super(), this.inner = e, this.defaultValue = s;
+  }
+  validate(e) {
+    return e === void 0 ? { success: !0, data: this.defaultValue } : this.inner.validate(e);
+  }
+}
+class I extends T {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(e) {
+    super(), this.shape = e;
+  }
+  validate(e) {
+    if (typeof e != "object" || e === null || Array.isArray(e))
+      return { success: !1, errors: [{ message: "Expected object" }] };
+    const s = e, t = {}, n = [];
+    for (const [r, l] of Object.entries(this.shape)) {
+      const u = l.validate(s[r]);
+      if (u.success)
+        t[r] = u.data;
+      else
+        for (const g of u.errors)
+          n.push({
+            message: g.message,
+            path: [r, ...g.path || []]
+          });
+    }
+    return n.length > 0 ? { success: !1, errors: n } : { success: !0, data: t };
+  }
+  refine(e, s) {
+    const t = new I(this.shape), n = t.validate.bind(t);
+    return t.validate = (r) => {
+      const l = n(r);
+      if (!l.success) return l;
+      const u = e(l.data);
+      return u ? {
+        success: !1,
+        errors: [
+          {
+            message: u,
+            path: s?.path
+          }
+        ]
+      } : { success: !0, data: l.data };
+    }, t;
+  }
+}
+const me = () => new C(), fe = () => new V(), he = (c) => new I(c);
+function se(c) {
+  return z((e) => {
+    const s = [], t = () => s.forEach((r) => r());
+    return c(({
+      effect: r = "opaque",
+      mode: l = "capturing",
+      onClickOutside: u,
+      onEscape: g,
+      content: h,
+      container: m = "body"
+    }) => {
+      m === "body" && (e = e.makePortal("body"));
+      const i = G();
+      i.listenOnClosed(t);
+      let b = () => {
+      }, p = () => {
+      };
+      const d = (a) => {
+        a.key === "Escape" && (g?.(), i.close());
+      }, y = () => {
+        u?.(), i.close();
+      }, x = (a) => {
+        b(), p(), a === "capturing" ? (document.addEventListener("keydown", d), b = () => document.removeEventListener("keydown", d), e.element.addEventListener("mousedown", y), p = () => e.element.removeEventListener("mousedown", y)) : (b = () => {
+        }, p = () => {
+        });
+      }, v = j.on(l, x);
+      s.push(v), s.push(() => {
+        i.dispose(), b(), p();
+      });
+      const w = R((() => {
+        const a = /* @__PURE__ */ new Set();
+        for (const o of e.element.querySelectorAll(
+          ":scope > :not([data-overlay])"
+        ))
+          o.hasAttribute("inert") ? a.add(o) : o.setAttribute("inert", "");
+        return s.push(() => {
+          for (const o of e.element.querySelectorAll(
+            ":scope > :not([data-overlay])"
+          ))
+            a.has(o) || o.removeAttribute("inert");
+          a.clear();
+        }), document.activeElement?.blur?.(), E.div(
+          q((o) => i.setElement(o)),
+          F.status(i.status.map(String)),
+          F.overlay("true"),
+          f.class(
+            A(
+              r ?? "opaque",
+              l
+            )(
+              (o, L) => `bc-overlay bc-overlay--effect-${o} bc-overlay--mode-${L}`
+            )
+          ),
+          h
+        );
+      })(), e.element, {
+        disposeWithParent: !0,
+        clear: !1,
+        providers: e.providers
+      });
+      s.push(w), J(() => i.open());
+    }, t);
+  });
+}
+function ne(c, e) {
+  const {
+    size: s = "md",
+    dismissable: t = !0,
+    showCloseButton: n = !0,
+    onClose: r,
+    overlayEffect: l = "opaque",
+    container: u = "body",
+    position: g = "center"
+  } = c;
+  return se((h, m) => {
+    let i = () => {
+    };
+    return e((d) => {
+      i = m;
+      const y = U("capturing");
+      j.on(t, (o) => {
+        y.set(o ? "capturing" : "non-capturing");
+      });
+      const x = A(
+        d.header != null,
+        n
+      )((o, L) => o || L), v = N("modal"), k = `${v}-header`, w = `${v}-body`, a = E.div(
+        f.class(
+          A(
+            s,
+            g
+          )(
+            (o, L) => `bc-modal bc-modal--size-${o} bc-modal--container-${u} bc-modal--position-${L}`
+          )
+        ),
+        // Essential ARIA attributes for modal dialog
+        f.role("dialog"),
+        B.modal(!0),
+        ...d.header ? [B.labelledby(k)] : [],
+        B.describedby(w),
+        f.tabindex(-1),
+        // Make modal focusable for initial focus
+        f.id(v),
+        F.focusTrap("true"),
+        // Mark as focus trap container
+        H.mousedown((o) => o.stopPropagation()),
+        // Prevent overlay click-outside when clicking modal content
+        // Focus trap implementation
+        $({
+          escapeDeactivates: !1,
+          // Let Overlay handle escape key
+          initialFocus: () => {
+            const o = document.getElementById(v);
+            if (!o) return null;
+            const L = o.querySelector(
+              '[aria-label="Close modal"]'
+            );
+            if (L) return L;
+            const M = o.querySelector(
+              'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+            return M || o;
+          }
+        }),
+        // Modal content container
+        E.div(
+          f.class("bc-modal__content"),
+          // Header section
+          O(
+            x,
+            () => E.div(
+              f.class("bc-modal__header"),
+              E.div(
+                f.class("bc-modal__title"),
+                ...d.header ? [f.id(k)] : [],
+                d.header
+              ),
+              O(
+                n,
+                () => _(
+                  P,
+                  (o) => Q({
+                    size: "sm",
+                    label: o.$.closeModal,
+                    onClick: () => {
+                      i(), m();
+                    }
+                  })
+                )
+              )
+            )
+          ),
+          // Body section
+          E.div(f.class("bc-modal__body"), f.id(w), d.body),
+          // Footer section
+          d.footer && E.div(f.class("bc-modal__footer"), d.footer)
+        )
+      );
+      h({
+        mode: y,
+        effect: l ?? "opaque",
+        container: u,
+        content: a,
+        onClickOutside: () => {
+          r?.(), m();
+        },
+        onEscape: () => {
+          r?.(), m();
+        }
+      });
+    }, () => {
+      i(), m();
+    });
+  });
+}
+function pe(c, e) {
+  const { confirmText: s, cancelText: t, onConfirm: n, onCancel: r, ...l } = c;
+  return _(
+    P,
+    (u) => ne({ showCloseButton: !1, ...l }, (g, h) => {
+      const m = () => {
+        n?.(), h();
+      }, i = () => {
+        r?.(), h();
+      };
+      return e((p) => {
+        g({
+          body: p,
+          footer: K(
+            f.class("bc-modal__actions"),
+            D(
+              {
+                variant: "outline",
+                onClick: i
+              },
+              S(t, u.$.cancel)
+            ),
+            D(
+              {
+                color: "primary",
+                variant: "filled",
+                onClick: m
+              },
+              S(s, u.$.confirm)
+            )
+          )
+        });
+      }, h);
+    })
+  );
+}
+export {
+  V as B,
+  pe as C,
+  $ as F,
+  ne as M,
+  se as O,
+  C as S,
+  I as a,
+  fe as b,
+  Z as c,
+  he as o,
+  me as s,
+  de as u
+};

package/dist/{notice-CZHWWwOQ.js → notice-BuZvdvZh.js}

@@ -1,12 +1,13 @@
-import { I as j, a as z, C as O } from "./text-input-CFJntP7G.js";
-import { Use as V, input as A, attr as n, coalesce as F, on as m, Empty as w, emitValue as I, prop as k, computedOf as C, html as p, aria as M, When as P, Fragment as $, Value as g, Unless as R, Ensure as S } from "@tempots/dom";
+import { C as z } from "./text-input-B3VBat1k.js";
+import { Use as V, input as j, attr as t, coalesce as A, on as m, Empty as w, emitValue as I, prop as O, computedOf as C, html as p, aria as F, When as P, Fragment as $, Value as g, Unless as M, Ensure as R } from "@tempots/dom";
+import { a as S, I as k } from "./input-container-DiCjOzR2.js";
 import { B as x, I as E } from "./translations-Cq8bUKJP.js";
-import { C as W } from "./use-form-CgZyrACX.js";
-const Q = (t) => {
+import { C as W } from "./use-form-B56E_x5Y.js";
+const X = (n) => {
   const l = {
     name: "email",
     autocomplete: "email",
-    ...t
+    ...n
   }, {
     value: r,
     before: s,
@@ -14,28 +15,28 @@ const Q = (t) => {
     onChange: d,
     onInput: c,
     placeholder: v
-  } = l, b = s ?? j({
+  } = l, b = s ?? S({
     icon: "line-md:email",
-    size: t.size,
+    size: n.size,
     color: "neutral"
   });
   return V(
     x,
-    (f) => z({
-      ...t,
+    (f) => k({
+      ...n,
       before: b,
-      input: A.email(
-        O(l),
-        n.placeholder(F(v, f.$.emailPlaceholderText)),
-        n.value(r),
-        n.class("bc-input"),
+      input: j.email(
+        z(l),
+        t.placeholder(A(v, f.$.emailPlaceholderText)),
+        t.value(r),
+        t.class("bc-input"),
         o != null ? m.blur(I(o)) : w,
         d != null ? m.change(I(d)) : w,
         c != null ? m.input(I(c)) : w
       )
     })
   );
-}, X = (t) => {
+}, Y = (n) => {
   const {
     value: l,
     onBlur: r,
@@ -48,11 +49,11 @@ const Q = (t) => {
     autocomplete: f,
     placeholder: _,
     ...h
-  } = t, T = {
+  } = n, T = {
     name: "password",
     disabled: b,
     ...h
-  }, i = k(!0), a = C(
+  }, i = O(!0), a = C(
     i,
     f
   )((e, u) => e ? u ?? "current-password" : "off");
@@ -62,9 +63,9 @@ const Q = (t) => {
       i,
       _
     )((y, N, U) => N ? "•••••••••••••••" : U ?? y), B = p.button(
-      n.type("button"),
-      n.class("bc-input-container__password-toggle"),
-      M.label(e.$.togglePasswordVisibility),
+      t.type("button"),
+      t.class("bc-input-container__password-toggle"),
+      F.label(e.$.togglePasswordVisibility),
       m.click(() => i.update((y) => !y)),
       P(
         i,
@@ -72,23 +73,23 @@ const Q = (t) => {
         () => E({ icon: "line-md:watch-off" })
       )
     );
-    return z({
+    return k({
       before: d,
       disabled: b,
       hasError: v,
       input: p.input(
-        O({
+        z({
           ...T,
           autocomplete: a,
           placeholder: u
         }),
         P(
           i,
-          () => $(n.type("password")),
-          () => $(n.type("text"))
+          () => $(t.type("password")),
+          () => $(t.type("text"))
         ),
-        n.class("bc-input"),
-        n.value(l),
+        t.class("bc-input"),
+        t.value(l),
         r != null ? m.blur(I(r)) : w,
         s != null ? m.change(I(s)) : w,
         o != null ? m.input(I(o)) : w
@@ -97,8 +98,8 @@ const Q = (t) => {
     });
   });
 };
-function q(t) {
-  switch (t) {
+function q(n) {
+  switch (n) {
     case "success":
       return "material-symbols:check-circle-outline";
     case "warning":
@@ -110,8 +111,8 @@ function q(t) {
       return "material-symbols:info-outline";
   }
 }
-function D(t) {
-  switch (t) {
+function D(n) {
+  switch (n) {
     case "success":
       return "success";
     case "warning":
@@ -123,16 +124,16 @@ function D(t) {
       return "info";
   }
 }
-function G(t, l, r, s) {
+function G(n, l, r, s) {
   const o = [
     "bc-notice",
-    `bc-notice--${t}`,
+    `bc-notice--${n}`,
     `bc-notice--tone-${l}`
   ];
   return r && o.push("bc-notice--dismissible"), s && s.length > 0 && o.push(s), o.join(" ");
 }
-function Y({
-  variant: t = "info",
+function Z({
+  variant: n = "info",
   tone: l = "subtle",
   role: r,
   title: s,
@@ -141,12 +142,12 @@ function Y({
   onDismiss: c,
   class: v
 }, ...b) {
-  const f = k(!0);
+  const f = O(!0);
   return P(f, () => {
     const _ = g.map(
       d,
       (a) => !!a || c != null
-    ), h = g.map(t, (a) => a ?? "info"), T = g.map(l, (a) => a ?? "subtle"), i = C(
+    ), h = g.map(n, (a) => a ?? "info"), T = g.map(l, (a) => a ?? "subtle"), i = C(
       r,
       h
     )(
@@ -155,7 +156,7 @@ function Y({
     return V(
       x,
       (a) => p.div(
-        n.class(
+        t.class(
           C(
             h,
             T,
@@ -164,11 +165,11 @@ function Y({
           )((e, u, B, y) => G(e, u, B, y))
         ),
         // Accessibility role mapping (always defined)
-        n.role(g.map(i, (e) => e)),
-        R(
+        t.role(g.map(i, (e) => e)),
+        M(
           g.map(o, (e) => e === !1),
           () => p.div(
-            n.class("bc-notice__icon"),
+            t.class("bc-notice__icon"),
             E({
               icon: C(
                 o,
@@ -182,12 +183,12 @@ function Y({
           )
         ),
         p.div(
-          n.class("bc-notice__body"),
-          S(
+          t.class("bc-notice__body"),
+          R(
             s,
-            (e) => p.div(n.class("bc-notice__title"), e)
+            (e) => p.div(t.class("bc-notice__title"), e)
           ),
-          p.div(n.class("bc-notice__content"), ...b)
+          p.div(t.class("bc-notice__content"), ...b)
         ),
         P(
           _,
@@ -204,7 +205,7 @@ function Y({
   });
 }
 export {
-  Q as E,
-  Y as N,
-  X as P
+  X as E,
+  Z as N,
+  Y as P
 };