@serendie/ui 2.0.0 → 2.1.0

package/dist/node_modules/@zag-js/collapsible/dist/index.js

@@ -1,231 +1,283 @@
-import { createAnatomy as E } from "../../anatomy/dist/index.js";
-import { raf as c, createScope as N, getComputedStyle as f, dataAttr as O } from "../../dom-query/dist/index.js";
-import { createMachine as h } from "../../core/dist/index.js";
-import { compact as v } from "../../utils/dist/index.js";
-import { createProps as y } from "../../types/dist/index.js";
-import { ref as I } from "../../store/dist/index.js";
-var L = E("collapsible").parts("root", "trigger", "content"), g = L.build(), l = N({
-  getRootId: (n) => {
-    var r;
-    return ((r = n.ids) == null ? void 0 : r.root) ?? `collapsible:${n.id}`;
-  },
-  getContentId: (n) => {
-    var r;
-    return ((r = n.ids) == null ? void 0 : r.content) ?? `collapsible:${n.id}:content`;
-  },
-  getTriggerId: (n) => {
-    var r;
-    return ((r = n.ids) == null ? void 0 : r.trigger) ?? `collapsible:${n.id}:trigger`;
-  },
-  getRootEl: (n) => l.getById(n, l.getRootId(n)),
-  getContentEl: (n) => l.getById(n, l.getContentId(n)),
-  getTriggerEl: (n) => l.getById(n, l.getTriggerId(n))
-});
-function T(n, r, e) {
-  const o = n.matches("open", "closing"), i = n.matches("open"), t = n.context.height, s = n.context.width, a = !!n.context.disabled, d = !n.context.initial && i;
+import { createAnatomy as k } from "../../anatomy/dist/index.js";
+import { raf as h, dataAttr as v, getComputedStyle as O, setStyle as I, getEventTarget as y, nextTick as b } from "../../dom-query/dist/index.js";
+import { createMachine as N } from "../../core/dist/index.js";
+import { createProps as S } from "../../types/dist/index.js";
+var z = k("collapsible").parts("root", "trigger", "content", "indicator"), m = z.build(), x = (e) => {
+  var t;
+  return ((t = e.ids) == null ? void 0 : t.root) ?? `collapsible:${e.id}`;
+}, C = (e) => {
+  var t;
+  return ((t = e.ids) == null ? void 0 : t.content) ?? `collapsible:${e.id}:content`;
+}, A = (e) => {
+  var t;
+  return ((t = e.ids) == null ? void 0 : t.trigger) ?? `collapsible:${e.id}:trigger`;
+}, g = (e) => e.getById(C(e));
+function T(e, t) {
+  const { state: n, send: s, context: o, scope: i, prop: l } = e, a = n.matches("open") || n.matches("closing"), r = n.matches("open"), { width: c, height: u } = o.get("size"), d = !!l("disabled"), E = !o.get("initial") && r, f = "ltr";
   return {
-    disabled: a,
-    visible: o,
-    open: i,
+    disabled: d,
+    visible: a,
+    open: r,
+    measureSize() {
+      s({ type: "size.measure" });
+    },
     setOpen(p) {
-      p !== i && r(p ? "OPEN" : "CLOSE");
+      n.matches("open") !== p && s({ type: p ? "open" : "close" });
     },
     getRootProps() {
-      return e.element({
-        ...g.root.attrs,
-        "data-state": i ? "open" : "closed",
-        dir: n.context.dir,
-        id: l.getRootId(n.context)
+      return t.element({
+        ...m.root.attrs,
+        "data-state": r ? "open" : "closed",
+        dir: f,
+        id: x(i)
       });
     },
     getContentProps() {
-      return e.element({
-        ...g.content.attrs,
-        "data-state": d ? void 0 : i ? "open" : "closed",
-        id: l.getContentId(n.context),
-        "data-disabled": O(a),
-        hidden: !o,
+      return t.element({
+        ...m.content.attrs,
+        "data-collapsible": "",
+        "data-state": E ? void 0 : r ? "open" : "closed",
+        id: C(i),
+        "data-disabled": v(d),
+        hidden: !a,
         style: {
-          "--height": t != null ? `${t}px` : void 0,
-          "--width": s != null ? `${s}px` : void 0
+          "--height": u != null ? `${u}px` : void 0,
+          "--width": c != null ? `${c}px` : void 0
         }
       });
     },
     getTriggerProps() {
-      return e.element({
-        ...g.trigger.attrs,
-        id: l.getTriggerId(n.context),
-        dir: n.context.dir,
+      return t.element({
+        ...m.trigger.attrs,
+        id: A(i),
+        dir: f,
         type: "button",
-        "data-state": i ? "open" : "closed",
-        "data-disabled": O(a),
-        "aria-controls": l.getContentId(n.context),
-        "aria-expanded": o || !1,
+        "data-state": r ? "open" : "closed",
+        "data-disabled": v(d),
+        "aria-controls": C(i),
+        "aria-expanded": a || !1,
         onClick(p) {
-          p.defaultPrevented || a || r({ type: i ? "CLOSE" : "OPEN", src: "trigger.click" });
+          p.defaultPrevented || d || s({ type: r ? "close" : "open" });
         }
       });
+    },
+    getIndicatorProps() {
+      return t.element({
+        ...m.indicator.attrs,
+        dir: f,
+        "data-state": r ? "open" : "closed",
+        "data-disabled": v(d)
+      });
     }
   };
 }
-function P(n) {
-  const r = v(n);
-  return h(
-    {
-      id: "collapsible",
-      initial: r.open ? "open" : "closed",
-      context: {
-        ...r,
-        height: 0,
-        width: 0,
-        initial: !1,
-        stylesRef: null,
-        unmountAnimationName: null
-      },
-      watch: {
-        open: ["setInitial", "computeSize", "toggleVisibility"]
-      },
-      exit: ["clearInitial"],
-      states: {
-        closed: {
-          tags: ["closed"],
-          on: {
-            "CONTROLLED.OPEN": "open",
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["setInitial", "computeSize", "invokeOnOpen"]
-              }
-            ]
+var V = N({
+  initialState({ prop: e }) {
+    return e("open") || e("defaultOpen") ? "open" : "closed";
+  },
+  context({ bindable: e }) {
+    return {
+      size: e(() => ({
+        defaultValue: { height: 0, width: 0 },
+        sync: !0
+      })),
+      initial: e(() => ({
+        defaultValue: !1
+      }))
+    };
+  },
+  refs() {
+    return {
+      cleanup: void 0,
+      stylesRef: void 0
+    };
+  },
+  watch({ track: e, prop: t, action: n }) {
+    e([() => t("open")], () => {
+      n(["setInitial", "computeSize", "toggleVisibility"]);
+    });
+  },
+  exit: ["clearInitial", "cleanupNode"],
+  states: {
+    closed: {
+      on: {
+        "controlled.open": {
+          target: "open"
+        },
+        open: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitial", "computeSize", "invokeOnOpen"]
           }
+        ]
+      }
+    },
+    closing: {
+      effects: ["trackExitAnimation"],
+      on: {
+        "controlled.close": {
+          target: "closed"
         },
-        closing: {
-          tags: ["open"],
-          activities: ["trackAnimationEvents"],
-          on: {
-            "CONTROLLED.CLOSE": "closed",
-            "CONTROLLED.OPEN": "open",
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["setInitial", "invokeOnOpen"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnExitComplete"]
-              },
-              {
-                target: "closed",
-                actions: ["setInitial", "computeSize", "invokeOnExitComplete"]
-              }
-            ],
-            "ANIMATION.END": {
-              target: "closed",
-              actions: ["invokeOnExitComplete"]
-            }
+        "controlled.open": {
+          target: "open"
+        },
+        open: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitial", "invokeOnOpen"]
+          }
+        ],
+        close: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnExitComplete"]
+          },
+          {
+            target: "closed",
+            actions: ["setInitial", "computeSize", "invokeOnExitComplete"]
           }
+        ],
+        "animation.end": {
+          target: "closed",
+          actions: ["invokeOnExitComplete", "clearInitial"]
+        }
+      }
+    },
+    open: {
+      effects: ["trackEnterAnimation"],
+      on: {
+        "controlled.close": {
+          target: "closing"
         },
-        open: {
-          tags: ["open"],
-          on: {
-            "CONTROLLED.CLOSE": "closing",
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closing",
-                actions: ["setInitial", "computeSize", "invokeOnClose"]
-              }
-            ]
+        close: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closing",
+            actions: ["setInitial", "computeSize", "invokeOnClose"]
           }
+        ],
+        "size.measure": {
+          actions: ["measureSize"]
+        },
+        "animation.end": {
+          actions: ["clearInitial"]
         }
       }
+    }
+  },
+  implementations: {
+    guards: {
+      isOpenControlled: ({ prop: e }) => e("open") != null
     },
-    {
-      guards: {
-        isOpenControlled: (e) => !!e["open.controlled"]
+    effects: {
+      trackEnterAnimation: ({ send: e, scope: t }) => {
+        let n;
+        const s = h(() => {
+          const o = g(t);
+          if (!o) return;
+          const i = O(o).animationName;
+          if (!i || i === "none") {
+            e({ type: "animation.end" });
+            return;
+          }
+          const a = (r) => {
+            y(r) === o && e({ type: "animation.end" });
+          };
+          o.addEventListener("animationend", a), n = () => {
+            o.removeEventListener("animationend", a);
+          };
+        });
+        return () => {
+          s(), n == null || n();
+        };
       },
-      activities: {
-        trackAnimationEvents(e, o, { send: i }) {
-          let t;
-          const s = c(() => {
-            const a = l.getContentEl(e);
-            if (!a) return;
-            const d = f(a).animationName;
-            if (!d || d === "none") {
-              i({ type: "ANIMATION.END" });
-              return;
-            }
-            const m = (u) => {
-              const C = (a.ownerDocument.defaultView || window).getComputedStyle(a).animationName;
-              u.target === a && C === e.unmountAnimationName && i({ type: "ANIMATION.END" });
-            };
-            a.addEventListener("animationend", m), t = () => {
-              a.removeEventListener("animationend", m);
-            };
+      trackExitAnimation: ({ send: e, scope: t }) => {
+        let n;
+        const s = h(() => {
+          const o = g(t);
+          if (!o) return;
+          const i = O(o).animationName;
+          if (!i || i === "none") {
+            e({ type: "animation.end" });
+            return;
+          }
+          const a = (c) => {
+            y(c) === o && e({ type: "animation.end" });
+          };
+          o.addEventListener("animationend", a);
+          const r = I(o, {
+            animationFillMode: "forwards"
           });
-          return () => {
-            s(), t == null || t();
+          n = () => {
+            o.removeEventListener("animationend", a), b(() => r());
           };
-        }
+        });
+        return () => {
+          s(), n == null || n();
+        };
+      }
+    },
+    actions: {
+      setInitial: ({ context: e, flush: t }) => {
+        t(() => {
+          e.set("initial", !0);
+        });
       },
-      actions: {
-        setInitial(e) {
-          e.initial = !0;
-        },
-        clearInitial(e) {
-          e.initial = !1;
-        },
-        computeSize(e, o) {
-          var i;
-          (i = e._rafCleanup) == null || i.call(e), e._rafCleanup = c(() => {
-            const t = l.getContentEl(e);
-            if (!t) return;
-            if (e.stylesRef || (e.stylesRef = I({
-              animationName: t.style.animationName,
-              animationDuration: t.style.animationDuration
-            })), o.type === "CLOSE" || !e.open) {
-              const d = t.ownerDocument.defaultView || window;
-              e.unmountAnimationName = d.getComputedStyle(t).animationName;
-            }
-            const s = t.hidden;
-            t.style.animationName = "none", t.style.animationDuration = "0s", t.hidden = !1;
-            const a = t.getBoundingClientRect();
-            e.height = a.height, e.width = a.width, e.initial && (t.style.animationName = e.stylesRef.animationName, t.style.animationDuration = e.stylesRef.animationDuration), t.hidden = s;
-          });
-        },
-        invokeOnOpen: (e) => {
-          var o;
-          (o = e.onOpenChange) == null || o.call(e, { open: !0 });
-        },
-        invokeOnClose: (e) => {
-          var o;
-          (o = e.onOpenChange) == null || o.call(e, { open: !1 });
-        },
-        invokeOnExitComplete(e) {
-          var o;
-          (o = e.onExitComplete) == null || o.call(e);
-        },
-        toggleVisibility: (e, o, { send: i }) => {
-          i({ type: e.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" });
-        }
+      clearInitial: ({ context: e }) => {
+        e.set("initial", !1);
+      },
+      cleanupNode: ({ refs: e }) => {
+        e.set("stylesRef", null);
+      },
+      measureSize: ({ context: e, scope: t }) => {
+        const n = g(t);
+        if (!n) return;
+        const { height: s, width: o } = n.getBoundingClientRect();
+        e.set("size", { height: s, width: o });
+      },
+      computeSize: ({ refs: e, scope: t, context: n }) => {
+        var o;
+        (o = e.get("cleanup")) == null || o();
+        const s = h(() => {
+          const i = g(t);
+          if (!i) return;
+          const l = i.hidden;
+          i.style.animationName = "none", i.style.animationDuration = "0s", i.hidden = !1;
+          const a = i.getBoundingClientRect();
+          n.set("size", { height: a.height, width: a.width }), n.get("initial") && (i.style.animationName = "", i.style.animationDuration = ""), i.hidden = l;
+        });
+        e.set("cleanup", s);
+      },
+      invokeOnOpen: ({ prop: e }) => {
+        var t;
+        (t = e("onOpenChange")) == null || t({ open: !0 });
+      },
+      invokeOnClose: ({ prop: e }) => {
+        var t;
+        (t = e("onOpenChange")) == null || t({ open: !1 });
+      },
+      invokeOnExitComplete: ({ prop: e }) => {
+        var t;
+        (t = e("onExitComplete")) == null || t();
+      },
+      toggleVisibility: ({ prop: e, send: t }) => {
+        t({ type: e("open") ? "controlled.open" : "controlled.close" });
       }
     }
-  );
-}
-y()([
+  }
+});
+S()([
   "dir",
   "disabled",
   "getRootNode",
@@ -233,11 +285,11 @@ y()([
   "ids",
   "onExitComplete",
   "onOpenChange",
-  "open.controlled",
+  "defaultOpen",
   "open"
 ]);
 export {
-  L as anatomy,
+  z as anatomy,
   T as connect,
-  P as machine
+  V as machine
 };